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

Posted 2023-03-27

【中文标题】为啥我的 HTML 表单在 Sharepoint 和 jsfiddle 中的显示不同？

【英文标题】：Why are my HTML forms appearing differently in Sharepoint and jsfiddle?为什么我的 HTML 表单在 Sharepoint 和 jsfiddle 中的显示不同？

【发布时间】：2015-10-25 19:37:49

【问题描述】：

我正在这个 fiddle 中模拟一个 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>

更新

添加 Sully 的 CSS 和 HTML，jsfiddle 看起来更好，但对 Sharepoint Web 部件的相同添加并没有改变它。

也许 Sharepoint 不允许多个表单位于同一“行”上？

更新 2

不幸但并不奇怪，它在 Chrome 中看起来不同（另一个非小提琴尖叫镜头是 IE）：

【参考方案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/

【讨论】：

这有助于 jsfiddle，但 Sharepoint 表单仍然与这些添加搞砸了；有关 Sharepoint 表单的当前视图，请参阅上面的更新。

要查看是否是 Sharepoint 将 CSS 应用于表单，我会尝试强制向左浮动：“float: left !important”，但请注意，我不建议保留 !important，它不是把那些洒在身上很有趣。如果 !important “修复”了对齐问题，我们可以比使用 !important 做得更好。