為什么我的HTML表單在Sharepoint和jsfiddle中的顯示方式有所不同？

Question

我正在這個小提琴中模擬一個Sharepoint Web部件，它目前看起來像這樣（第二種形式尚未格式化/對齊，如您所見）：

（即使這樣，除了第二種形式的丑陋格式外，它也不是完美的，因為第二種形式在我希望的位置下方對齊了一個“行”）。

我在Sharepoint Web部件上使用完全相同的CSS和HTML，但有很大不同：

我想要右邊的第二個表單，而不是下面的第一個表單。 不過，Sharepoint表示似乎並沒有限制表單寬度以允許這樣做。 為什么會有所不同，以及如何使Sharepoint網頁更接近於jsfiddle版本？

這是代碼（再次，在兩個地方完全一樣）：

CSS

.underline {
    text-decoration: underline;
}
input[placeholder] {
    font-size: 0.6em;
    width: 500;
}
.firstblocklabel {
    width: 160px;
    display: inline-block;
    margin: 2px;
}
.firstblockdatelabel {
    width: 108px;
    display: inline-block;
}
.firstblockinput {
    width: 224px;
}
.dateinput {
    width: 124px;
    margin: 2px;
}
.timeinput {
    width: 100px;
}
form {
    display: inline-block;
    vertical-align:top;
    //float: left;
}
.borderedform {
    border: 1px solid;
    margin: 1em;
    padding: 1em;
}
.reditalics {
    color: red;
    font-style: italic;
}
.wrappedlabel { width: 320px; display: block; }

HTML

<h2 class="underline">UCSC POST TRAVEL EXPENSE</h2>

<label>Form Filled Out:</label>
<input type="date" style="width=100px"></input>
<label>Access the <a href="https://financial.ucsc.edu/Pages/travel_guide.aspx#Travel_Expense_Report" target="_blank">Post Travel Guide</a> for reimbursement validation</label>
<br/>
<br/>
<form>
    <label class="firstblocklabel">Traveler's name:</label>
    <input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
    <br/>
    <label class="firstblocklabel">Traveler's E-mail:</label>
    <input class="firstblockinput" type="email" id="traveleremail" />
    <br/>
    <label class="firstblocklabel">Traveler's Phone:</label>
    <input class="firstblockinput" type="tel" id="travelerphone" />
    <br/>
    <label class="firstblocklabel">Traveler's Mail Stop:</label>
    <input class="firstblockinput" type="text" id="travelermailstop" />
    <br/>
    <label class="firstblocklabel" id="travelerstreetorpoboxlabel">Traveler's Street or P.O.:</label>
    <input class="firstblockinput" type="text" id="travelerstreetorpobox" />
    <br/>
    <label class="firstblocklabel">Traveler's Destinations:</label>
    <input class="firstblockinput" type="text" id="travelersdestinations" />
    <br/>
    <label class="firstblocklabel">UC Business Purpose:</label>
    <input class="firstblockinput" type="text" id="ucbusinesspurpose" />
    <br/>
    <label class="firstblockdatelabel">Departure Date:</label>
    <input class="dateinput" type="date" id="travelersdeparturedate" />
    <label>Time:</label>
    <input class="timeinput" type="time" id="travelersdeparturetime" />
    <br/>
    <label class="firstblockdatelabel">Return Date:</label>
    <input class="dateinput" type="date" id="travelersreturndate" />
    <label>Time:</label>
    <input class="timeinput" type="time" id="travelersreturntime" />
</form>
<form class="borderedform">
    <label>Trip Number:</label>
    <input type="text" id="tripnumber" title="If Applicable" />
    <br/>
    <label>Form prepared by:</label>
    <input type="text" id="formpreparedby" />
    <hr/>
    <label>Dept / Division</label>
    <input type="text" id="deptdivision" />
    <br/>
    <label>Email:</label>
    <input type="email" id="email" />
    <label>Ext:</label>
    <input type="text" id="extension" />
    <hr/>
    <label class="reditalics">Required:</label>
    <label>US Citizen - YES</label>
    <input type="radio" id="uscitizenyes" value="YES" />
    <label>NO</label>
    <input type="radio" id="uscitizenno" value="NO" />
    <br/>
    <input type="radio" id="visitor" />Visitor
    <label>Foreign Visa Type:</label>
    <select title="Please select a visa type">
        <option value="pleaseselect">Please Select</option>
        . . .
    </select>
    <br/>
    <input type="radio" id="ucstudent" />UC Student
    <br/>
    <input type="radio" id="ucemployee" />UC Employee
    <label>UC Campus:</label>
    <select title="Please select a campus">
        <option value="pleaseselect">Please Select</option>
        . . .
    </select>
    <br/>
    <label class="wrappedlabel"><span style="color:red">Note: </span>If traveler chooses to include personal travel, record times/dates based only on the business portion of the trip. Provide explanation of personal travel.</label>
</form>

UPDATE

添加Sully的CSS和HTML，jsfiddle看起來更好，但是對Sharepoint Web部件的相同添加根本沒有改變它。

也許Sharepoint不允許多個表單位於同一“行”上？

更新2

不幸的是，但並不奇怪，它在Chrome中看起來有所不同（另一個非小提琴的尖叫聲是IE）：

Answer 1

嘗試使您的表單float:left 。

獎勵：對於有邊框的形式，請使用margin-left而不是margin，以刪除頂部的垂直空間。

CSS

.firstform { float: left; }
.borderedform {
    float: left;
    border: 1px solid;
    margin-left: 1em;
    padding: 1em;
}

要使用該CSS，請在第一個表單中添加class="firstform" 。

http://jsfiddle.net/z8y6L303/