1. 홈
  2. 질의 응답
  3. 어쩌면 CSS로 UI 문제를 해결할 수 있습니까? 이 스냅 샷에 여기에서 볼 수 있듯이

어쩌면 CSS로 UI 문제를 해결할 수 있습니까? 이 스냅 샷에 여기에서 볼 수 있듯이

2011-01-24 3 views
0

그래서 내가, UI 문제를 많이 가지고 :어쩌면 CSS로 UI 문제를 해결할 수 있습니까? 이 스냅 샷에 여기에서 볼 수 있듯이

enter image description here

필드 사방에있는 필드 간의 간격이 나쁜, 필드의 길이는 라인하지 않습니다 서로 위로. 최소한 페이지 길이를 볼 수 있도록 최소한 컨트롤 길이, 간격 및 이러한 종류의 문제를 해결할 수있는 CSS가 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>

을 사용하고 제목

. 감사!

출처

2011-01-24 slandau

+0

당신의 페이지에 HTML 또는 링크를 붙여 넣을 수 있습니다. CSS는 –

+0

으로 작성 될 수 있습니다. 실제로 엉망으로 보입니다. 현재 HTML/CSS를 보지 않고 [Google] (http://www.google.com/search?q=css+form+layout)을 가리킬 수밖에 없습니다. 이미지를 기반으로 문제를 해결할 수있는 마법 같은 CSS는 없습니다 : D – thirtydot

+0

내 마크 업이 추가되었습니다. – slandau

답변

2

이것이 내가하는 일입니다.

  • 모든 인라인 CSS 즉 스타일 제거 "= 폭 : 80 픽셀" 및 클래스를 LeftRightBorder
  • 처럼 제거 모든 테이블
  • 변경 DIV economicDetails에 "FIELDSET"
    • 을. 실제로 각 그룹에 하나의 Fieldset을 추가합니다. 그래서 3 또는 4 개의 다른 필드 세트
  • 이제 모든 라벨, 입력, 체크 박스 등에 대해 깨끗한 CSS를 적용하십시오.
  • CSS를 적용하여 멋지게 정렬 할 수 있도록 Fieldset에 CSS를 적용하십시오.
    •

출처

2011-01-25 09:06:26

+0

저는 CSS 전문가입니다. 롤. 몇 가지 예가 있습니까? – slandau

+0

이 글은 읽을만한 훌륭한 자료라고 생각합니다. http://articles.sitepoint.com/article/fancy-form-design-css –

관련 문제

 관련 문제