Сделать списки ul друг на друга

Question

Я пытаюсь сделать два списка с заголовком каждого из них.

Мне нужно сделать эти два списка рядом друг с другом с заголовком над каждым, я пытался использовать float:left, но это не сработало.

.list ul 
 
{ 
 
    
 
    float:left; 
 
    list-style:none; 
 
    
 
}

<div class="list"> 
 
      <h1>Practices</h1> 
 
      <ul> 
 
       <li>Antitrust</li> 
 
       <li>Appellate</li> 
 
       <li>Copyright</li> 
 
       <li>International Patent</li> 
 
       <li>International Disputes</li> 
 
       <li>Litigation & Arbitration</li> 
 
      </ul> 
 
      <h1>Industries</h1> 
 
      <ul> 
 
       <li>Agriculture & Energy</li> 
 
       <li>Computer & Technology</li> 
 
       <li>Environmental</li> 
 
       <li>Life Sciences</li> 
 
       <li>Medical Device</li> 
 
      </ul> 
 
     </div>

Answer 1

Вы можете обернуть <h1> и <ul> к <div> и установить float:left; свойство этого элемента.

Затем установите элемент .list, чтобы иметь свойство vertical-align:top;.

.list 
 
{ 
 
    vertical-align:top; 
 
} 
 

 
.list ul 
 
{ 
 
    list-style:none; 
 
} 
 

 
.list .ul-wrapper 
 
{ 
 
    float:left; 
 
}

<div class="list"> 
 
    <div class="ul-wrapper"> 
 
     <h1>Practices</h1> 
 
     <ul> 
 
      <li>Antitrust</li> 
 
      <li>Appellate</li> 
 
      <li>Copyright</li> 
 
      <li>International Patent</li> 
 
      <li>International Disputes</li> 
 
      <li>Litigation & Arbitration</li> 
 
     </ul> 
 
    </div> 
 
    <div class="ul-wrapper"> 
 
     <h1>Industries</h1> 
 
     <ul> 
 
      <li>Agriculture & Energy</li> 
 
      <li>Computer & Technology</li> 
 
      <li>Environmental</li> 
 
      <li>Life Sciences</li> 
 
      <li>Medical Device</li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 2

Здесь вы идете, сэр:

<style> 
    .ul-wrapper{float:left;} 
</style>  
<div class="list"> 
    <div class="ul-wrapper"> 
     <h1>Practices</h1> 
     <ul> 
      <li>Antitrust</li> 
      <li>Appellate</li> 
      <li>Copyright</li> 
      <li>International Patent</li> 
      <li>International Disputes</li> 
      <li>Litigation & Arbitration</li> 
     </ul> 
    </div> 
    <div class="ul-wrapper"> 
     <h1>Industries</h1> 
     <ul> 
      <li>Agriculture & Energy</li> 
      <li>Computer & Technology</li> 
      <li>Environmental</li> 
      <li>Life Sciences</li> 
      <li>Medical Device</li> 
     </ul> 
    </div> 
</div>