将wordpress页面分成五列

Question

我正在尝试创建wordpress页脚。我需要将页面分成五列，我使用了两个URL作为示例。我写的代码如下：

.footer-titlesb { 
 
     color: #393939; 
 
     font-size: 18px; 
 
     text-align: left; 
 
     line-height: 2.3; 
 
     font-weight: 700; 
 
    } 
 
    .lefttextb { 
 
     text-align: left; 
 
     font-size: 13px; 
 
     color: #393939; 
 
     !important; 
 
     line-height: 1.8; 
 
     font-weight: 400; 
 
     list-style-type: none; 
 
    } 
 
    .lefttextb a { 
 
     color: #393939; 
 
    } 
 
    .lefttextb a:hover { 
 
     color: #393939; 
 
     padding-bottom: 2px; 
 
     border-bottom: 1px dashed #393939; 
 
    }

<div style="width: 20%; padding: 0 10px 0 0; float: left;"> 
 
    <div class="footer-titlesb">Our Community</div> 
 
    <div class="lefttextb"><a href="http://domain.com/forums/">Forums</a> 
 
    <br /> 
 
    <a href="http://domain.com/community">Community</a> 
 
    <br />Report a Problem 
 
    <br /> 
 
    </div> 
 
</div> 
 
<div style="width: 20%; padding: 0 10px 0 0; float: left;"> 
 
    <div class="footer-titlesb">Company</div> 
 
    <div class="lefttextb">About Us 
 
    <br />Privacy Policy 
 
    <br />Terms 
 
    <br /> 
 
    </div> 
 
</div> 
 
<div style="width: 20%; padding: 0 10px 0 0; float: left;"> 
 
    <div class="footer-titlesb">Resources</div> 
 
    <div class="lefttextb">Scores 
 
    <br />Tips 
 
    <br />Examination 
 
    </div> 
 
</div> 
 
<div style="width: 20%; padding: 0 10px 0 0; float: left;"> 
 
    <div class="footer-titlesb">Follow Us</div> 
 
    <div class="lefttextb">Facebook 
 
    <br />Twitter 
 
    <br />Google Plus 
 
    <br /> 
 
    </div> 
 
</div> 
 
<div style="width: 20%; padding: 0 10px 0 0; float: right;"> 
 
    <div class="footer-titlesb">Connect</div> 
 
    <div class="lefttextb">Contact Us 
 
    <br />Feedback 
 
    <br />Send us 
 
    <br /> 
 
    </div> 
 
</div> 
 
<div style="”clear: both;"></div>

我不知道为什么列并不在一条线走。如果你纠正我，我会很高兴，因为我担心浮球有问题（即：左，右等等），或者我可能使用不同的宽度。

Answer 1

您可以使用box-sizing property来更改用于计算元素宽度的默认CSS框模型。目前，每个div上的填充都会导致每个div的有效宽度为10px + 20%。

您可以更改box-sizing到border-box来解决这个问题：

.footer-titlesb { 
 
     color: #393939; 
 
     font-size: 18px; 
 
     text-align: left; 
 
     line-height: 2.3; 
 
     font-weight: 700; 
 
    } 
 
    .lefttextb { 
 
     text-align: left; 
 
     font-size: 13px; 
 
     color: #393939; 
 
     !important; 
 
     line-height: 1.8; 
 
     font-weight: 400; 
 
     list-style-type: none; 
 
    } 
 
    .lefttextb a { 
 
     color: #393939; 
 
    } 
 
    .lefttextb a:hover { 
 
     color: #393939; 
 
     padding-bottom: 2px; 
 
     border-bottom: 1px dashed #393939; 
 
    }

<div style="width: 20%; padding: 0 10px 0 0; float: left; box-sizing: border-box;"> 
 
    <div class="footer-titlesb">Our Community</div> 
 
    <div class="lefttextb"><a href="http://domain.com/forums/">Forums</a> 
 
    <br /> 
 
    <a href="http://domain.com/community">Community</a> 
 
    <br />Report a Problem 
 
    <br /> 
 
    </div> 
 
</div> 
 
<div style="width: 20%; padding: 0 10px 0 0; float: left; box-sizing: border-box;"> 
 
    <div class="footer-titlesb">Company</div> 
 
    <div class="lefttextb">About Us 
 
    <br />Privacy Policy 
 
    <br />Terms 
 
    <br /> 
 
    </div> 
 
</div> 
 
<div style="width: 20%; padding: 0 10px 0 0; float: left; box-sizing: border-box;"> 
 
    <div class="footer-titlesb">Resources</div> 
 
    <div class="lefttextb">Scores 
 
    <br />Tips 
 
    <br />Examination 
 
    </div> 
 
</div> 
 
<div style="width: 20%; padding: 0 10px 0 0; float: left; box-sizing: border-box;"> 
 
    <div class="footer-titlesb">Follow Us</div> 
 
    <div class="lefttextb">Facebook 
 
    <br />Twitter 
 
    <br />Google Plus 
 
    <br /> 
 
    </div> 
 
</div> 
 
<div style="width: 20%; padding: 0 10px 0 0; float: right; box-sizing: border-box;"> 
 
    <div class="footer-titlesb">Connect</div> 
 
    <div class="lefttextb">Contact Us 
 
    <br />Feedback 
 
    <br />Send us 
 
    <br /> 
 
    </div> 
 
</div> 
 
<div style="clear: both;"></div>