应用左边框时 Css3 html5 Div 对齐方式中出现意外问题

Unexpected issue in Css3 html5 Div alignement when applying border-left

本文关键字：方式中 意外 问题 对齐 Div 边框 左边 Css3 html5 应用      更新时间：2023-09-26

我正在尝试使用 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&nbsp;&nbsp; </span><span class="labelTxt">&nbsp;GUI TEST  </span><div> 
         <div class="lineDiv"><span class="labelP">JID&nbsp;&nbsp; </span><span class="labelTxt">12345 </span><div>
            <div class="lineDiv"><span class="labelP">JID&nbsp;&nbsp; </span><span class="labelTxt">12345 </span><div>

    </div>
    </div>

</div></div></div></div></div></div></body>

结果 以下是LiveWeave上的永久链接 http://liveweave.com/z25PTh

那么为什么div 没有对齐？任何人都可以解释或优化此代码吗？

你还没有关闭你的div块，关闭div块...

<div class="lineDiv"><span class="labelP">Name&nbsp;&nbsp; </span><span class="labelTxt">&nbsp;GUI TEST  </span>**<div> <-------   </div>**
<div class="lineDiv"><span class="labelP">JID&nbsp;&nbsp; </span><span class="labelTxt">12345 </span>**<div> <-------   </div>**
相关文章：