推動元件向下時，某些元素存在

我有一些標記，爲一組字段的形式中：推動元件向下時，某些元素存在

<ul> 
    <li> 
    <label>Field label</label> 
    <ul> 
     <li> 
      <span> 
       <label>some label</label> 
       <input type="text" value="a" size="35" maxlength="35"> 
      </span> 
     </li>  
     <li> 
      <span> 
       <label>some label</label> 
       <input type="text" value="b" size="35" maxlength="35"> 
      </span> 
     </li> 
     <li> 
      <span> 
       <label>some label</label> 
       <input type="text" value="c" size="35" maxlength="35"> 
      </span> 
     </li> 
    </ul> 
    </li> 
</ul>

還有一些CSS到他們的位置是：

*{ 
    position: relative; 
} 

span{ 
    position: relative; 
    display: inline-block; 

} 

input{ 
    float:left; 
} 

label{ 
    float:left; 
    margin-top: 15px; 
    left: 70px; 
} 

li > ul{ 
    margin-left: -100px; 
    max-width: 400px; 
    display: inline-block; 
} 


li > label{ 
    float: left; 
    vertical-align: top; 
    margin: 0; 
    left: 0; 
    width: 120px; 
    display: inline-block; 
}

這導致了這個佈局，這對我所需要的是完美的： enter image description here

問題：當某些字段填寫不正確時，系統會生成錯誤消息，導致m arkup像這樣：

<ul> 
    <li> 
    <label>Field label</label> 
    <ul> 
     <li> 
      <span> 
       <label>some label</label> 
       <div class="error">some error message.</div> 
       <input type="text" value="a" size="35" maxlength="35"> 
      </span> 
     </li>  
     <li> 
      <span> 
       <label>some label</label> 
       <div class="error">some error message.</div> 
       <input type="text" value="b" size="35" maxlength="35"> 
      </span> 
     </li> 
     <li> 
      <span> 
       <label>some label</label> 
       <div class="error">some error message.</div> 
       <input type="text" value="c" size="35" maxlength="35"> 
      </span> 
     </li> 
    </ul> 
    </li> 
</ul>

這導致了這樣的事情：

enter image description here

相反，我想的錯誤消息顯示是這樣的：

enter image description here

我試過讓標籤內的標籤絕對定位，然後對齊到標籤底部。但是，由於某些原因，即使我給標籤margin-top，它總是與文本輸入重疊。

我怎樣才能獲得的形式看起來像所需的佈局插入錯誤消息時？

來源

2012-06-15 F21

要在標籤一致顯示文本輸入下，該錯誤信息是否不存在，我建議以下方法：

位置跨度底部的標籤。
將邊距添加到輸入的底部，以增大足以容納標籤的跨度。

這裏是一個減小的例子來說明該技術：

HTML：

<span> 
     <label>some label</label> 
     <div class="error">some error message.</div> 
     <input type="text" value="a" size="35" maxlength="35"> 
    </span>

CSS：

span{ 
    display: block; 
    position: relative; 
} 

label { 
    position: absolute; 
    bottom: 0px; 
} 

input { 
    margin-bottom: 20px; 
}

http://jsfiddle.net/fuEqB/

來源

2012-06-15 02:56:50

只需使用浮動左，重新排列元素在html：

ul { 
    padding: 0; 
} 

li { 
    display: block; 
} 

.form-label { 
    float: left; 
    padding-right: 20px; 
} 

label { 
    display: block; 
} 

ul ul { 
    float: left; 
} 

.error { 
    color: red; 
}

http://jsfiddle.net/ysv8E/embedded/result/

來源

2012-06-15 01:36:33 jasssonpet

不幸的是，如由生成的HTML後端，我沒有任何自由將他們排列在:( – F21

不知道如果我正確地讀這篇文章，但...

邊距韓元不適用於位置爲絕對的孤立元素，因爲絕對定位的元素不是常規流佈局的一部分。上邊距沒有任何作用。

位置：absolute的元素也不會導致在常規流佈局中使用額外的垂直空間，這就是爲什麼它們出現在輸入上而不是下面的輸入上。

如果您必須使用position：absolute，則必須安排另一種方式將多餘的垂直空間添加到佈局中。使用CSS，您可以隱藏和顯示不具有位置的不可見元素：絕對（除了隱藏和顯示錯誤消息），或者可以在顯示錯誤消息時增加每個表單元素之間的邊距或填充。但是可能有一個更簡單的方法來做到這一點（少用絕對位置）。

來源

2012-06-15 02:42:52

推動元件向下時，某些元素存在

回答

相關問題