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

Question

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

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

看看我的fiddle。

ul > li {
        display: initial;
    }

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

我已经在样式表、头部和内联中尝试过了。我很茫然。

Answer 1

.hashtag 是 ul class，您尝试将 CSS 应用到 li child 上，但这行不通.尝试以这种方式更改您的选择器：

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

这里正在工作fiddle 您需要更新以下 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>

fiddle

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

Two unordered lists on the same page, one inline and one initial

html

css

html-lists

display