让孩子平均填充父母div的100％宽度？

Question

我在页脚中有一系列的ul，我想要均匀地填充包含div的整个宽度。

有6个ul，所以我尝试使用16.66666666666667％的宽度属性，加起来容器的宽度达到100％，但这包含了下面的最终ul。

我显然不能使用较低的数字，因为它不能正确填充到100％的总宽度。

有什么想法吗？

＆＃13;

＆＃13;

    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%;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试删除行元素上的10％左右填充。

Answer 2

您可以使用display: flex;上的#footerNav和flex-grow: 1; flex-basis: 0;上的ul来#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%; }中均匀分配可用宽度}

＆＃13;

＆＃13;

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

＆＃13;

read myvar
read myvar2

while [ $myvar -le $myvar2 ]
do

    echo $myvar
    myvar=$(($myvar+1))

    #//timer in-between numbers

    sleep .5

done

＆＃13;

＆＃13;

＆＃13;