用CSS修复我的UI问题？
所以我有很多UI问题，正如您在此快照中可以看到的那样：
字段遍布整个地方，间距BETWEEN字段不好，字段长度不相互排列。我可以在页面上放置CSS，至少可以修复控件长度，间距和那些东西，这样页面至少可以更好地查看吗？ CSS会是什么？
我对这个东西不好= /谢谢！
编辑：
例如，标题为“输入您的经济详情”的部分正在使用此标记
<div id="economicDetails">
<table id="table4" cellpadding="4" cellspacing="0">
<tr id="tr5">
<td id="td6">
</td>
<td id="td7" style="text-align: right;">
Indication Nickname
</td>
<td id="td8" colspan="3">
<%= Html.TextBoxFor(m => m.STPData.ProjectName, new { @class = "economicTextBox", propertyName = "STPData.ProjectName", onchange = "UpdateField(this);" })%>
</td>
</tr>
<tr id="tr9">
<td id="td10" style="width: 80px">
<%= Html.LabelFor(m => m.EffectiveDate) %>
</td>
<td id="td11">
<%= Html.TextBox("EffectiveDate", Model.EffectiveDate.HasValue ? Model.EffectiveDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "EffectiveDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
</td>
<td id="td12">
<%= Html.LabelFor(m => m.Notional) %>
</td>
<td id="td13" style="width: 350px">
<span>
<%= Html.DropDownListFor(m =>
m.ActiveProduct.CurrencyID,
DropDownData.CurrencyList(), "",
new { @class = "economicTextBox", propertyName = "ActiveProduct.CurrencyID", onchange = "UpdateField(this);" })%>
</span>
<%= Html.TextBoxFor(m => m.Notional, new { @class = "economicTextBox", propertyName = "Notional", onchange = "FormatAsMoney(this, 10000000000, true); UpdateField(this);" })%>
</td>
</tr>
<tr id="tr14">
<td id="td15">
<%= Html.LabelFor(m => m.MaturityDate) %>
</td>
<td id="td16">
<%= Html.TextBox("MaturityDate", Model.MaturityDate.HasValue ? Model.MaturityDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "MaturityDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
<%= Html.DropDownListFor(m => m.AmortizationComponent.MaturityBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "AmortizationComponent.MaturityBusinessDayConvention", onchange = "UpdateField(this);" })%>
</td>
<td id="td17" style="width: 76px">
Value Date
</td>
<td id="td18" style="width: 218px">
<%= Html.TextBoxWithPermission("RateTimeStamp", Model.RateTimeStamp.HasValue ? Model.RateTimeStamp.Value.ToString("dd-MMM-yyyy") : "", new string[] { PERMISSIONS.hasICAdvanced }, new { @class = "economicTextBox", propertyName = "RateTimeStamp", onchange = "parseAndSetDt(this);", dataType = "Date" })%>
<br />
<%= Html.CheckBoxForWithPermission(m => m.Current, new string[] { PERMISSIONS.hasICAdvanced }, new { @class = "economicTextBox", propertyName = "Current", onchange = "UseCurrent();UpdateField(this);" })%>
Current
</td>
</tr>
<tr id="tr19">
<td id="td20">
Holiday Cities
</td>
<td id="td21">
<table id="table22">
<tr id="tr23">
<td id="td24">
<div id="holidayCityLabel" style="color: Blue; text-decoration: underline; cursor: pointer" />
<div id="holidayCityList" style="overflow: auto" class="holidayCityList">
<%foreach (SelectListItem holiday in DropDownData.HolidayDays())
{ %>
<% bool holidaySelected = Model.Trx.TransactionHolidayCityCollection.Find(item => item.IsDeleted == false && item.HolidayCityID.Value.ToString() == holiday.Value) != null; %>
<input type="checkbox" name="Trx.TransactionHolidayCityCollection" id="Holiday<%= holiday.Value %>"
value="<%=holiday.Value%>" <%= holidaySelected == false ? "" : "checked=checked" %> />
<label id="HolidayLabel<%= holiday.Value %>" for="Holiday<%=holiday.Value%>">
<%=holiday.Text%></label>
<br />
<%} %>
</div>
</td>
<td id="td25">
<span validationFor="holidayCity" style='display:none'>
<img class='validation' src='<%= VirtualPathUtility.ToAbsolute("~/img/exclamation.gif")%>' />
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="div26" style="height: 10px" />
<table id="table27" cellpadding="2" cellspacing="0">
<tr id="tr28">
<td id="td29" style="width: 90px;">
</td>
<td id="td30" style="width: 225px;" class="leftRightBorder componentHeader">
Fixed Component
</td>
<td id="td31" style="width: 15px;">
</td>
<td id="td32" style="width: 100px;">
</td>
<td id="td33" style="width: 350px;" class="leftRightBorder componentHeader">
Floating Component
</td>
</tr>
<tr id="tr34">
<td id="td35">
Fixed Rate
</td>
<td id="td36" class="leftRightBorder">
<div id="div37" class="componentCell" style="font-style: italic">
Calculated
</div>
</td>
<td id="td38">
</td>
<td id="td39">
Index
</td>
<td id="td40" class="leftRightBorder">
<table id="table41">
<tr id="tr42">
<td id="td43">
<%= Html.DropDownListFor(m => m.FloatingComponent.IndexID, DropDownData.IndexDropList(), "",
new { propertyName = "FloatingComponent.IndexID", onchange = "UpdateField(this, false); FillIndexDescription();UpdateResetEnabled();" })%>
</td>
<td id="td44">
<span id="indexDetailsDescription" propertyName="IndexOptions" style="padding-left: 15px; color: Blue; text-decoration: underline;
cursor: pointer" />
</td>
</tr>
</table>
</td>
</tr>
<tr id="tr45">
<td id="td46">
</td>
<td id="td47" class="leftRightBorder">
</td>
<td id="td48">
</td>
<td id="td49">
Reset Day
</td>
<td id="td50" class="leftRightBorder">
<span id="resetLabel" propertyName="ResetLabel" class="componentCell" style="color: Blue; text-decoration: underline;
cursor: pointer" />
</td>
</tr>
<tr id="tr51">
<td id="td52">
</td>
<td id="td53" class="leftRightBorder">
</td>
<td id="td54">
</td>
<td id="td55">
Reset Convention
</td>
<td id="td56" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.ResetDayComponent.ResetBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "ResetDayComponent.ResetBusinessDayConvention", onchange = "UpdateField(this);" })%>
</td>
</tr>
<tr id="tr57">
<td id="td58">
Frequency
</td>
<td id="td59" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FixedComponent.PaymentFrequency", onchange = "UpdateField(this);" })%>
</td>
<td id="td60" />
<td id="td61">
Frequency
</td>
<td id="td62" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentFrequency, DropDownData.FrequencyDropList(), "", new { propertyName = "FloatingComponent.PaymentFrequency", onchange = "UpdateField(this);" })%>
</td>
</tr>
<tr id="tr63">
<td id="td64">
Payment Day
</td>
<td id="td65" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.PaymentDay", onchange = "UpdateField(this);" })%>
<%= Html.DropDownListFor(m => m.FixedComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);" })%>
</td>
<td id="td66" />
<td id="td67">
Payment Day
</td>
<td id="td68" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.PaymentDay", onchange = "UpdateField(this);", disabled="disabled" })%>
<%= Html.DropDownListFor(m => m.FloatingComponent.PaymentBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.PaymentBusinessDayConvention", onchange = "UpdateField(this);", disabled="disabled" })%>
</td>
</tr>
<tr id="tr69">
<td id="td70">
Roll Day
</td>
<td id="td71" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FixedComponent.RollDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FixedComponent.RollDay", onchange = "UpdateField(this);" })%>
<%= Html.DropDownListFor(m => m.FixedComponent.RollBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FixedComponent.RollBusinessDayConvention", onchange = "UpdateField(this);" })%>
</td>
<td id="td72" />
<td id="td73">
Roll Day
</td>
<td id="td74" class="leftRightBorder">
<%= Html.DropDownListFor(m => m.FloatingComponent.RollDay, DropDownData.DaysOfMonthList(), "", new { propertyName = "FloatingComponent.RollDay", onchange = "UpdateField(this);", disabled = "disabled" })%>
<%= Html.DropDownListFor(m => m.FloatingComponent.RollBusinessDayConvention, DropDownData.BusinessDayConventionList(), "", new { propertyName = "FloatingComponent.RollBusinessDayConvention", onchange = "UpdateField(this);" })%>
</td>
</tr>
<tr id="tr75">
<td id="td76">
First Roll Date
</td>
<td id="td77" class="leftRightBorder">
<%= Html.TextBox("FixedComponent_FirstRollDate", Model.FixedComponent.FirstRollDate.HasValue ? Model.FixedComponent.FirstRollDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "FixedComponent.FirstRollDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
</td>
<td id="td78" />
<td id="td79">
First Roll Date
</td>
<td id="td80" class="leftRightBorder">
<%= Html.TextBox("FloatingComponent_FirstRollDate", Model.FloatingComponent.FirstRollDate.HasValue ? Model.FloatingComponent.FirstRollDate.Value.ToString("dd-MMM-yyyy") : "", new { @class = "economicTextBox", propertyName = "FloatingComponent.FirstRollDate", onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
</td>
</tr>
<tr id="tr81">
<td id="td82">
Long Last Stub
</td>
<td id="td83" class="leftRightBorder">
<%= Html.CheckBoxFor(m => Model.LongLastStub, new { propertyName = "LongLastStub", onchange = "UpdateField(this);" })%>
</td>
<td id="td84" colspan="2" />
<td id="td85" class="leftRightBorder">
</td>
</tr>
<tr id="tr86">
<td id="td87">
Day Count
</td>
<td id="td88" class="leftRightBorder bottomBorder">
<%= Html.DropDownListFor(m => m.FixedComponent.DayCountConvention, DropDownData.DayCountDropList(), "", new { propertyName = "FixedComponent.DayCountConvention", onchange = "UpdateField(this);" })%>
</td>
<td id="td89" />
<td id="td90">
Day Count
</td>
<td id="td91" class="leftRightBorder bottomBorder">
<%= Html.DropDownListFor(m => m.FloatingComponent.DayCountConvention, DropDownData.DayCountDropList(), "", new { propertyName = "FloatingComponent.DayCountConvention", onchange = "UpdateField(this);" })%>
</td>
</tr>
</table>
</div>
</div>
其他部分基本上采用相同的格式。谢谢！
1 个答案:
答案 0 :(得分：2)
这就是我要做的。
- 删除所有内联CSS，即 style“= width：80px”以及 LeftRightBorder 等类
- 删除所有表格
- 将DIV economicDetails 更改为“Fieldset”。实际上我会为每个组添加一个Fieldset。所以可能有3或4个不同的Fieldsets
- 现在为所有标签，输入，复选框等应用干净的CSS。
- 将CSS应用于Fieldset，让它们很好地对齐。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？