應用左邊框時Css3 html5 Div對齊中的意外問題
[英]Unexpected issue in Css3 html5 Div alignement when applying border-left
問題描述
我正在嘗試使用html5和css3生成報告，但出現意外情況。 我需要的是理解為什么div不對齊
CSS3
.lineDiv{ border-left: 5px solid #FF0000; background:whitesmoke;height:30px; margin-top: 10px; }
/* */
.titleDiv {border-bottom:5px solid OrangeRed;border-top: 4px solid #FFFFFF; text-align: center; ;background:gainsboro;height: 50px; font-size: 18px;color:#2F4F4F ; font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; font-weight:bold; text-shadow: 1px 1px white;}
.mainDiv{
margin: auto;height: 600px;width: 600px; border: 1px solid gray; }
.bodyDiv
{
margin: 10%;
align-content: center;
}
.labelP
{ float: left; margin-top: 7px;width: 80px; border-right: 1px solid white;vertical-align: middle;
text-align:left; font-size: 15px;color:#2F4F4F ; font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; font-weight:bold; text-shadow: 1px 1px white;
}
.labelTxt
{display: inline-block; ; margin-top: 7px;width: 80px; vertical-align: middle;width:auto;
text-align:left; font-size: 15px;color:#2F4F4F ; font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; text-shadow: 1px 1px white;
}
.sectionDiv {border-right:5px solid OrangeRed;border-left:5px solid OrangeRed; text-align: center; ;background:gainsboro;height: 24px; font-size: 16px;color:#2F4F4F ; font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; font-weight:bold; text-shadow: 1px 1px white; margin-bottom: 5px;}
HTML5
<html>
<head>
<title>Job Alert</title>
</head>
<body>
<!-- Start your code here -->
<div class="mainDiv">
<div class="titleDiv"><p>Unexpected result detected</p></div>
<!-- Body Div-->
<div class="bodyDiv">
<div class="sectionDiv">Job Information</div>
<div class="lineDiv"><span class="labelP">Name </span><span class="labelTxt"> GUI TEST </span><div>
<div class="lineDiv"><span class="labelP">JID </span><span class="labelTxt">12345 </span><div>
<div class="lineDiv"><span class="labelP">JID </span><span class="labelTxt">12345 </span><div>
</div>
</div>
</div></div></div></div></div></div></body>
結果如下是liveweave上的永久鏈接http://liveweave.com/z25PTh
那么為什么div不對齊？ 誰能解釋或優化此代碼？
1 個解決方案
解決方案1
1 已采納 2014-04-07 08:55:32
您尚未關閉div塊，關閉div塊...
<div class="lineDiv"><span class="labelP">Name </span><span class="labelTxt"> GUI TEST </span>**<div> <------- </div>**
<div class="lineDiv"><span class="labelP">JID </span><span class="labelTxt">12345 </span>**<div> <------- </div>**
使用javascript設置div的border-left和border-right
[英]Setting both border-left and border-right for a div using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.