为什么我的 HTML 表单在 Sharepoint 和 jsfiddle 中显示不同？

Question

我正在这个 fiddle 中模拟一个 Sharepoint Web 部件，它目前看起来像这样（第二种形式尚未 formatted/aligned，如您所见）：

（即使这样，除了第二种形式的丑陋格式外，还不是完美的，因为第二种形式在我希望的位置下方对齐 "row"）。

我在 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>

更新

添加 Sully 的 CSS 和 HTML，jsfiddle 看起来更好，但是对 Sharepoint Web 部件的相同添加根本不会改变它。

也许 Sharepoint 不允许多个表单位于同一个 "row"？

更新 2

不幸但并不令人惊讶，它在 Chrome 中看起来有所不同（另一个非 fiddle 尖叫镜头是 IE）：

Answer 1

尝试制作表格 float:left。

奖励：对于 borderedform，使用 margin-left 而不是 margin 来移除顶部的垂直 space。

CSS

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

要使用 CSS，请将 class="firstform" 添加到第一个表格。

http://jsfiddle.net/z8y6L303/

为什么我的 HTML 表单在 Sharepoint 和 jsfiddle 中显示不同？

Why are my HTML forms appearing differently in Sharepoint and jsfiddle?

html

css

web-parts

sharepoint-2010

更新

更新 2