Question

我有CSS问题。我需要为我的文本输入制作所有相同宽度的标签，因此所有标签和文本输入框都正确排列。我知道如何实现这一点，但我的复选框css正在弄乱文本输入标签的CSS。例如...当我为文本输入添加label标签时，它会在文本输入标签的左侧显示一个复选框。

以下是我想要完成的几个例子：

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; }

Answer 1

如果您的唯一目标是使标签的宽度相同，那么您是不是可以在css的顶部添加这样的内容？

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

在：

enter image description here

后：

enter image description here

......或者我错过了什么？

Answer 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;
}

（我那里还有一些其他样式信息，我只是使用打开的页面来获取图像进行演示）

CSS用于对齐标签和文本输入字段

2 个答案: