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

Question

我正在尝试设置两个无序列表，并排成列。

我想设置左边的列表为display: initial;，右边的列表为display: inline;。

看看我的 fiddle .

ul > li {
        display: initial;
    }

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

我已经在样式表、head 和 inline 中尝试过了。我很茫然。

Answer 1

.hashtag 是一个 ul 类，您试图将 CSS 应用于您的 li 子级，但这是行不通的。尝试以这种方式更改您的选择器:

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>