我正在创建我的第一个html页面，并且正在尝试对div和标签进行一些对齐。 即使花费多个小时尝试不同的组合，标签和输入也似乎不正确。有些属性无法正常工作，例如我为标签使用了宽度，而在chrome中则显示了未知属性。
下面是代码。任何帮助，将不胜感激。
html / css部分的预览：
div.btn-toolbar {
position: relative;
top: 100px;
left: 40%;
width: 400px;
}
div.quote-details {
position: relative;
top: 122px;
left: 250px;
font-weight: bold;
font-size: 15px;
}
div.quote-detail-section-left {
float: left;
margin-top: 145px;
margin-left: 100px;
width: 35%;
}
input.quote-input {
padding: 4px;
}
label.field-label {
float: left;
font-weight: bold;
display: inline-block;
margin-left: 40px;
width: :50px;
clear: both;
}
div.quote-detail-section-right {
float: right;
margin-top: 145px;
margin-right: 80px;
width: 35%;
}<div class="quote-rec-page">
<div class="quote-details">
<label for="section" class="Segment">Quote Details</label>
</div>
<div class="btn-toolbar">
<button type="button">Edit</button>
<button type="button">Delete</button>
<button type="button">Create PDF</button>
<button type="button">Email Quote</button>
<button type="button">Start Sync</button>
</div>
<form>
<div class="quote-detail-section-left">
<div>
<label for="quoteNum" class="field-label">Quote Number</label>
<input type="text" class="quote-input" tabindex="1" id="quoteNumber" />
</div>
<div>
<label for="quoteName" class="field-label">Quote Name</label>
<input type="text" class="quote-input" tabindex="2" id="quoteName" />
</div>
<div>
<label for="oppName" class="field-label">Opportunity Name</label>
<input type="text" class="quote-input" tabindex="3" id="oppName" />
</div>
<div>
<label for="accName" class="field-label">Account Name</label>
<input type="text" class="quote-input" tabindex="4" id="accName" />
</div>
</div>
<div class="quote-detail-section-right">
<div>
<label for="expDate" class="field-label">Expiration Date</label>
<input type="date" class="quote-input" tabindex="5" id="expDate" />
</div>
<div>
<label for="sync" class="field-label">Syncing</label>
<input type="checkbox" class="quote-input" tabindex="6" id="sync" />
</div>
<div>
<label for="status" class="field-label">Status</label>
<input type="text" class="quote-input" tabindex="7" id="status" />
</div>
<div>
<label for="quoteDesc" class="field-label">Description</label>
<input type="text" class="quote-input" tabindex="8" id="quoteDesc" />
</div>
</div>
</form>
</div>
HTML / CSS（包括顶点代码）
<apex:page sidebar="false" showHeader="false">
<head>
<title>Quote Details</title>
</head>
<style>
div.btn-toolbar{
position:relative;
top:100px;
left:40%;
width:400px;
}
div.quote-details{
position:relative;
top:122px;
left:250px;
font-weight:bold;
font-size:15px;
}
div.quote-detail-section-left{
float:left;
margin-top : 145px;
margin-left: 100px;
width:35%;
}
input.quote-input{
padding:4px;
}
label.field-label{
float:left;
font-weight:bold;
display:inline-block;
margin-left : 40px;
width::50px;
clear:both;
}
div.quote-detail-section-right{
float:right;
margin-top : 145px;
margin-right: 80px;
width:35%;
}
</style>
<body>
<div class="quote-rec-page">
<div class = "quote-details">
<label for = "section" class="Segment">Quote Details</label>
</div>
<div class ="btn-toolbar">
<button type="button">Edit</button>
<button type="button">Delete</button>
<button type="button">Create PDF</button>
<button type="button">Email Quote</button>
<button type="button">Start Sync</button>
</div>
<form>
<div class ="quote-detail-section-left">
<div>
<label for="quoteNum" class ="field-label">Quote Number</label>
<input type="text" class="quote-input" tabindex="1" id="quoteNumber"/>
</div>
<div>
<label for="quoteName" class ="field-label">Quote Name</label>
<input type="text" class="quote-input" tabindex="2" id="quoteName"/>
</div>
<div>
<label for="oppName" class ="field-label">Opportunity Name</label>
<input type="text" class="quote-input" tabindex="3" id="oppName"/>
</div>
<div>
<label for="accName" class ="field-label">Account Name</label>
<input type="text" class="quote-input" tabindex="4" id="accName"/>
</div>
</div>
<div class ="quote-detail-section-right">
<div>
<label for="expDate" class ="field-label">Expiration Date</label>
<input type="date" class="quote-input" tabindex="5" id="expDate"/>
</div>
<div>
<label for="sync" class ="field-label">Syncing</label>
<input type="checkbox" class="quote-input" tabindex="6" id="sync"/>
</div>
<div>
<label for="status" class ="field-label">Status</label>
<input type="text" class="quote-input" tabindex="7" id="status"/>
</div>
<div>
<label for="quoteDesc" class ="field-label">Description</label>
<input type="text" class="quote-input" tabindex="8" id="quoteDesc"/>
</div>
</div>
</form>
</div>
</body>
</apex:page>