对齐标签和文本输入字段的 CSS答案

【问题标题】：CSS to align labels and text input fields对齐标签和文本输入字段的 CSS
【发布时间】：2013-10-20 19:04:16
【问题描述】：

我遇到了 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; }

【问题讨论】：

“但是我的复选框的 css 弄乱了文本输入标签的 css” – 然后通过不针对复选框的选择器来定位复选框的标签对于文本输入……
你能看看我的代码，给我一个例子
我尝试定位文本输入的标签，但它仍然不起作用。

标签： css

【解决方案1】：

如果你唯一的目标是让标签的宽度都一样，你不能在你的 CSS 顶部添加这样的东西吗？

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

之前：

之后：

...还是我错过了什么？

【讨论】：

【解决方案2】：

如果您想在您的 css 文件中更具体地说明此表单，您可以这样做：

#flexbox label{
    display:inline-block; 
    width:40px;
}

如果您只想对齐表单中的每个标签，这会稍微高效一些。您只需要确保指定的宽度比最长条目长。您只询问了标签，但鉴于您的输入都是数字，您可能想要输入以及那里的标签并摆脱 ul 标记点。即

#flexbox {
    width:120px;
}

#flexbox>ul *{
    display:inline-block; 
    width:40px;
    text-align: center;
}

#flexbox li{
    width:120px;
}

（我有一些额外的样式信息，我只是使用我打开的页面来获取图像用于演示）

【讨论】：