Question

我试图在列中并排设置两个无序列表。

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

查看我的fiddle。

ul > li {
        display: initial;
    }

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

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

Answer 1

.hashtag是一个ul课程，您试图在您li孩子身上使用CSS，但这不会起作用。尝试以这样的方式更改选择器：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

<强> fiddle

同一页面上有两个无序列表，一个是内联列表，另一个是初始列表

2 个答案: