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