CSS來對齊標籤和文本輸入字段

我有CSS問題。我需要爲我的文本輸入製作所有相同寬度的標籤，以便所有標籤和文本輸入框正確排列。我知道如何做到這一點，但我的複選框CSS是搞亂文本輸入標籤的CSS。例如...當我爲文本輸入添加標籤標籤時，它會在文本輸入標籤的左側顯示一個複選框。CSS來對齊標籤和文本輸入字段

這裏是什麼，我要完成幾個例子：

HTML表單

<div id="flexbox"> 
     <ul> 
     <li><label for="spd">SPD</label> <input type="text" name="spd" id="spd" value="<?php echo htmlentities($spd) ?>" /></li> 
     <li><label for="str">STR</label> <input type="text" name="str" id="str" value="<?php echo htmlentities($str) ?>" /></li> 
     <li><label for="agi">AGI</label> <input type="text" name="agi" id="agi" value="<?php echo htmlentities($agi) ?>" /></li> 
     <li><label for="acc">ACC</label> <input type="text" name="acc" id="acc" value="<?php echo htmlentities($acc) ?>" /></li> 
     <li><label for="awr">AWR</label> <input type="text" name="awr" id="awr" value="<?php echo htmlentities($awr) ?>" /></li> 
     </ul> 
    </div>

CSS

/* ----- Inputs, textareas and selects ----- */ 

    input[type="text"], textarea, select, div.styled, input[type="file"] { 
     width:15em; 
     border-radius:4px; 
     border: solid 1px #ccc; 
     padding:0.4em; 
    } 

    div.styled, select, input[type="submit"], input[type="button"], input[type="reset"], 
    input[type="file"]:after { 
     background: white url(img/formelements-select.png) no-repeat center right; 
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
     box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    } 

    input[type="text"], textarea, input[type="file"] { 
     background-color:#ffffff; 
     -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 
     box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 
    } 

    .ie9 input[type="text"] { line-height:normal; } /* Get the stuff to line up right */ 

    textarea { width:100%; height:10em; } 


    /* ----- Checkboxes and Radio inputs ----- */  

    input[type="radio"], 
    input[type="checkbox"] { position: absolute; left: -999em; } 

    label:before { 
     display: inline-block; 
     position: relative; 
     top:0.25em; 
     left:-2px; 
     content:''; 
     width:25px; 
     height:25px; 
     background-image:url(img/formelements.png); 
    } 

    input[type="checkbox"] + label:before { background-position: 0 -25px; } 
    input[type="checkbox"]:checked + label:before { background-position: 0 0 ; } 

    input[type="radio"] + label:before { background-position: -25px -25px; }   
    input[type="radio"]:checked + label:before { background-position: -25px 0; } 

    /* Remove the custom styling for IE 7-8 */ 

    .ie8 label:before { display:none; content:none; } 

    .ie8 input[type="checkbox"], 
    .ie8 input[type="radio"], 
    .ie7 input[type="checkbox"], 
    .ie7 input[type="radio"]{ 
     position: static; left:0; } 

    .ie8 input[type="checkbox"], 
    .ie8 input[type="radio"] { 
     position:relative; top:5px; margin-right:0.5em; } 

    input[type="text"]:focus, textarea:focus { 
     border-color:#000; }

來源

2013-10-20 RyanH

_」但我的複選框的css正在搞亂文本輸入標籤的CSS「_ - 那麼通過選擇器的目標標籤複選框，不針對文本輸入... – CBroe

你可以看看我的代碼，並給我一個例子 – RyanH

我試圖針對文本輸入的標籤，但它仍然無法正常工作。 – RyanH

如果你唯一的目標是使所有的標籤寬度相同，不能添加這樣的事情你的CSS的頂部？

li label, li input { 
    display: inline-block; 
} 
li label { 
    min-width: 80px; 
}

前：

enter image description here

後：

enter image description here

...還是我錯過了什麼？「

來源

2013-10-20 21:17:15 jerdiggity

CSS來對齊標籤和文本輸入字段

回答

相關問題