同一页面上的两个无序列表，一个内联和一个初始列表

Question

我正在尝试设置两个未订购的列表，并排在列中。

我想将左侧的列表设置为display: initial;，并在右侧的 display: inline;设置列表。

看看我的小提琴。

ul > li {
        display: initial;
    }
ul > li .hashtag {
        display: inline-block;
        margin: 5px 5px;      
}

我已经在样式表，头部和内联尝试过。我不知所措。

Answer 1

.hashtag是ul类，您试图在您的li儿童上应用CSS，这是行不通的。尝试以这种方式更改选择器：

ul.keyword  {
  display: initial;
}
ul.hashtag > li {
  display: inline-block;
  margin: 5px 5px;      
}

<div class="container">
<div class="row">
      <div class="col-lg-6">
        <h3>Below is a list of the most common keywords.</h3>
        <div class="col-lg-4">
          <ul class="keyword">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
          </ul>
        </div>
        <div class="col-lg-4">
          <ul class="keyword">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
          </ul>
        </div>
        <div class="col-lg-4"></div>
      </div>
      <div class="col-lg-6">
        <h3>Below is a list of the most common hashtags used. <small>Click to copy</small></h3>
        <ul class="hashtag">
          <li><button class="btn btn-sm btn-primary">#Button 1</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 2</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 3</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 4</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 5</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 6</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 7</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 8</button></li>
          <li><button class="btn btn-sm btn-primary">#Button 9</button></li>
        </ul>
      </div>
    </div>
</div>

Answer 2

这是在工作小提琴您需要在HTML之后进行更新以获取

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h3>Below is a list of the most common keywords.</h3>
            <div class="col-sm-4 col-xs-4">
                <ul class="keyword">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
                    <li>Item 7</li>
                    <li>Item 8</li>
                </ul>
            </div>
            <div class="col-sm-4 col-xs-4">
                <ul class="keyword">
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                    <li>Item 5</li>
                    <li>Item 6</li>
                    <li>Item 7</li>
                    <li>Item 8</li>
                </ul>
            </div>
            <div class="col-xs-4"></div>
        </div>
        <div class="clearfix"></div>
        <div class="col-lg-12">
            <h3>Below is a list of the most common hashtags used. <small>Click to copy</small></h3>
            <ul class="hashtag">
                <li><button class="btn btn-sm btn-primary">#Button 1</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 2</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 3</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 4</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 5</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 6</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 7</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 8</button></li>
                <li><button class="btn btn-sm btn-primary">#Button 9</button></li>
            </ul>
        </div>
    </div>
</div>

小提琴