同じページの2つの順序付けられていないリスト（インラインと1つの初期値）

Question

2つの順序付けられていないリストを列に並べて設定しようとしています。

左のリストをdisplay: initial;に、右のリストをdisplay: inline;に設定したいとします。

私のfiddleをご覧ください。

ul > li { 
     display: initial; 
    } 

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

私はスタイルシート、ヘッド、およびインラインで試しました。私は迷っている。

Answer 1

.hashtagは、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

は、あなたがそれを

<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