親欄の100％の幅を均等に塗りつぶすulを取得しますか？

Question

フッターに一連のulがあり、これを含むdivの幅全体を均等に塗りたいと思っています。

六つのulがあるので、それぞれ16.66666666666667％の幅プロパティを使用してコンテナの幅を100％にしてみましたが、これは最終的なulを下にラッピングしています。

明らかに、これは100％の合計幅に正しく充填されないため、低い数値を使用することはできません。

アイデア？

footer > row 
 
    { 
 
     height: 50px; 
 
     display: block; 
 
     padding: 30px 10%; 
 
    } 
 

 
    footer > #footerNav > ul 
 
    { 
 
     display: inline-block; 
 
     list-style-type: none; 
 
     padding: 0; 
 
     vertical-align: top; 
 
     width: 16%; 
 
    }

<footer> 
 
      
 
      <row id="footerNav"> 
 
       
 
       <ul> 
 
        
 
        <li>Address</li> 
 
        
 
        <li>Line 1,</li> 
 
        
 
        <li>Line 2,</li> 
 
        
 
        <li>London</li> 
 
        
 
        <li>Postcode</li> 
 
        
 
       </ul> 
 
       
 
       <ul> 
 
        
 
        <li>Contact</li> 
 
        
 
        <li>T: +44 (0) 0000 000000</li> 
 
        
 
        <li>Email: info@companyname.com</li> 
 
        
 
       </ul> 
 
       
 
       <ul> 
 
        
 
        <li>Links</a></li> 
 
        
 
        <li><a href="#">Shop</a></li> 
 
        
 
        <li><a href="#">Range</a></li> 
 
        
 
        <li><a href="#">Brands</a></li> 
 
        
 
        <li><a href="#">Case Studies</a></li> 
 
        
 
       </ul> 
 
       
 
       <ul> 
 
        
 
        <li>Media</li> 
 
        
 
        <li><a href="#">Brochure Download</a></li> 
 
        
 
        <li><a href="#">Watch our Videos</a></li> 
 
        
 
       </ul> 
 
       
 
       <ul> 
 
        
 
        <li>Legal</li> 
 
        
 
        <li><a href="#">Legal Notice</a></li> 
 
        
 
        <li><a href="#">Privacy Policy</a></li> 
 
        
 
       </ul> 
 
       
 
       <ul> 
 
        
 
        <li>Translator</li> 
 
        
 
        <li> 
 
         
 
         <select name="Select Language"> 
 
          
 
          <option value="Select Language">Select Language</option> 
 
          
 
          <option value="English (United Kingdom)">English (United Kingdom)</option> 
 
          
 
          <option value="English (United States)">English (United States)</option> 
 
          
 
          <option value="Option 3">Option 3</option> 
 
         
 
         </select> 
 
         
 
        </li> 
 
        
 
       </ul> 
 
       
 
      </row> 
 
      
 
      <row> 
 
       
 
       <a>© Copyright ******</a> 
 
       
 
      </row> 
 
      
 
     </footer>

Answer 1

それらが均等に#footerNav

footer > row { 
 
    height: 50px; 
 
    display: block; 
 
    padding: 30px 10%; 
 
} 
 

 
#footerNav { 
 
    display: flex; 
 
} 
 

 
footer > #footerNav > ul { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    vertical-align: top; 
 
    width: 16%; 
 
}

<footer> 
 

 
    <row id="footerNav"> 
 

 
    <ul> 
 

 
     <li>Address</li> 
 

 
     <li>Line 1,</li> 
 

 
     <li>Line 2,</li> 
 

 
     <li>London</li> 
 

 
     <li>Postcode</li> 
 

 
    </ul> 
 

 
    <ul> 
 

 
     <li>Contact</li> 
 

 
     <li>T: +44 (0) 0000 000000</li> 
 

 
     <li>Email: info@companyname.com</li> 
 

 
    </ul> 
 

 
    <ul> 
 

 
     <li>Links</a> 
 
     </li> 
 

 
     <li><a href="#">Shop</a></li> 
 

 
     <li><a href="#">Range</a></li> 
 

 
     <li><a href="#">Brands</a></li> 
 

 
     <li><a href="#">Case Studies</a></li> 
 

 
    </ul> 
 

 
    <ul> 
 

 
     <li>Media</li> 
 

 
     <li><a href="#">Brochure Download</a></li> 
 

 
     <li><a href="#">Watch our Videos</a></li> 
 

 
    </ul> 
 

 
    <ul> 
 

 
     <li>Legal</li> 
 

 
     <li><a href="#">Legal Notice</a></li> 
 

 
     <li><a href="#">Privacy Policy</a></li> 
 

 
    </ul> 
 

 
    <ul> 
 

 
     <li>Translator</li> 
 

 
     <li> 
 

 
     <select name="Select Language"> 
 

 
         <option value="Select Language">Select Language</option> 
 

 
         <option value="English (United Kingdom)">English (United Kingdom)</option> 
 

 
         <option value="English (United States)">English (United States)</option> 
 

 
         <option value="Option 3">Option 3</option> 
 

 
        </select> 
 

 
     </li> 
 

 
    </ul> 
 

 
    </row> 
 

 
    <row> 
 

 
    <a>© Copyright ******</a> 
 

 
    </row> 
 

 
</footer>

Answer 2

行要素10％、左右のパディングを削除してください。