.net - 用 CSS 修复我的 UI 问题？-6ren

.net - 用 CSS 修复我的 UI 问题？

转载作者：太空宇宙更新时间：2023-11-04 05:26:50

所以我有很多 UI 问题，正如您在此快照中所见:

enter image description here

字段到处都是，字段之间的间距不好，字段的长度没有相互对齐。有没有我可以在页面上放置的 CSS，它至少可以修复控制长度、间距和诸如此类的东西，这样页面至少可以更好看？ CSS 是什么？

我不擅长这些东西 =/谢谢!

编辑:

例如，标题为“输入您的经济学详细信息”的部分正在使用此标记

<div id="economicDetails">
                <table id="table4" cellpadding="4" cellspacing="0">
                    <tr id="tr5">
                        <td id="td6">
                            &nbsp;
                        </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;">
                            &nbsp;
                        </td>
                        <td id="td30" style="width: 225px;" class="leftRightBorder componentHeader">
                            Fixed Component
                        </td>
                        <td id="td31" style="width: 15px;">
                            &nbsp;
                        </td>
                        <td id="td32" style="width: 100px;">
                            &nbsp;
                        </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">
                            &nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td id="td47" class="leftRightBorder">
                            &nbsp;
                        </td>
                        <td id="td48">
                            &nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td id="td53" class="leftRightBorder">
                            &nbsp;
                        </td>
                        <td id="td54">
                            &nbsp;
                        </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">
                            &nbsp;
                        </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>

其他部分格式基本相同。谢谢!

最佳答案

这就是我会做的。

删除所有内联 CSS，即 style”=width: 80px” 和 LeftRightBorder 类
删除所有表
将 DIV economicDetails 更改为“Fieldset”。实际上我会为每个组添加一个 Fieldset。所以可能有 3 或 4 个不同的 Fieldset
现在为所有标签、输入、复选框等应用干净的 CSS。
将 CSS 应用于您的 Fieldset，使它们很好地对齐。

关于.net - 用 CSS 修复我的 UI 问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4787818/

文章推荐： css - 将 div 排成行

文章推荐： php - 通过 php (LINUX) 运行 Qt 生成的可执行文件 (EXE)

文章推荐： linux - 通过 ssh session 在 Linux 中安装 Flash Player

文章推荐： ruby-on-rails - Rails 应用程序显示 'index of/cms' 而不是 Rails

javascript - 修复 IE 的 div 宽度 @media 修复
我将一个 div 设置为 100% 宽度，当以 1024 分辨率查看页面时，宽度应从 100% 变为 1000px，我让它与@media 查询一起正常工作，并且在 FF、safari chrome 上
ckeditor - Domino 9.01 修复 3 CKEditor 错误 - 9.01 修复 1 上没有错误
希望有人能帮助我，我已经被困了几天了。将我的 Domino 服务器更新到 9.01 Fix 3 后，我在 javascript 控制台上不断收到错误消息: TypeError: this.edito
Java内存使用/修复
我们正在使用一个基于RMI的java应用程序。当我们运行应用程序时，即使应用程序处于理想阶段，内存使用量仍然不断增加。我们主要使用Vector和散列图数据结构。如何最大限度地减少java内存使用/修复
修复 IDM下载器假序列号错误优秀技巧分享
概述 Internet Download Manager (IDM)是最流行的 Windows 下载管理器。如果你平时工作中使用过IDM,您会惊叹 IDM 下载文件的速度有多快。IDM
authorization - 打开勇敢的浏览器时弹出错误？修复？
当我打开 brave 浏览器时，会打开一个窗口(如下所示)。它并没有真正干扰浏览器的处理。但令人担忧的是为什么这种情况一直发生...... Error On Opening Brave Browser
for-loop - 修复 For 循环中的错误
这是我今天在求职面试中被问到的一个问题: 看下面的代码: int n=20; for (int i =0; i
macports 修复/替换命令？
我不小心删除了/opt/local/bin/perl5.8.9 ，这似乎是 macports 编译的 perl 的主要二进制文件。现在我有很多取决于 perl5 的端口，但不想卸载并重新安装所有端口
haskell - 翻转修复/修复
>>>flip fix (0 :: Int) (\a b -> putStrLn "abc") Output: "abc" 这是使用翻转修复的简化版本。我在一些 YouTube 视频中看到了这种使用
java - 修复 NetworkOnMainThreadException
这个问题已经有答案了: How can I fix 'android.os.NetworkOnMainThreadException'? (64 个回答) 已关闭 3 年前。我在 Android 应
python - 修复 UnboundLocalError
def main(): cash = float(input("How much money: ")) coins = 0 def changeCounter(n): whil
mysql - 查询优化/修复
前一周我遇到了类似的问题，查询需要永远运行。在编写此查询时，我尝试应用从其他查询中学到的一些知识，但执行起来需要很长时间。运行查询的两个单独部分时，每个部分需要 2 分钟才能完成，这是可以接受的，但
CSS 'Dropdown' 修复
下午，我的 CSS 有问题。第三个下拉菜单放错了，我没有解决办法。这是我想要的: 之前: http://i53.tinypic.com/2qu85z8.png 之后: http://i51.tiny
ios - NSInternalInconsistencyException 修复
更新方法: override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingS
导航栏折叠的 CSS 修复
我知道这是一个很多人都遇到过的问题，但我不熟悉 Less 并且是 Bootstrap 的新手，我正在寻找一种全 CSS 解决方案来防止我的导航栏折叠到 768 像素以下:
javascript - 可调整大小的粘性页脚与内容重叠 - 修复
在我的布局中，我创建了以下 jsfiddle 托管的可调整大小的粘性页脚。但是，在调整大小时它与内容重叠。有没有办法让它在所有浏览器上都能响应？ http://jsfiddle.net/9aLc0mg
javascript - 修复 if 语句以停止移动
我想要实现的目标 racer-offset 是为了让用户可以设置图像可以以 px 为单位移动多远。偏移量管理偏移量。 Speed-racer 告诉我们图像在滚动过程中移动的速度。我的问题是它不会停止。
c++ - 修复/改进自动换行功能
我有一个简单的自动换行函数，它接受一个长字符串作为输入，然后将该字符串分成更小的字符串，并将它们添加到一个数组中，以便稍后输出。现在最后一两个字没有输出。这是主要问题。但是，我还想改进功能。我知道这有
禁用按钮的 JQuery 修复
我试图在使用每个 slider 之前禁用“下一步”按钮，我不确定为什么在单击不再是 class="not-clicked"的同一个 slider 时取消禁用该按钮. JSFiddle: (这里看起来有
java - 修复 NullPointerException？
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 8 年前。如何让程序输出所有信息？ IT
菜单鼠标悬停的 CSS 修复
On this page ，在“生活”下有一个带有自动生成的子菜单的菜单。子菜单存在一些问题(它会闪烁并改变大小——如果你滚动它就会看到)。我需要以某种方式覆盖它当前正在读取的 css 并使其统一。

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

.net - 用 CSS 修复我的 UI 问题？