0

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

2 回答 2

0

如果您唯一的目标是使标签的宽度都相同，那么您不能在 CSS 的顶部添加类似的内容吗？

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

前：

在此处输入图像描述

后：

在此处输入图像描述

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

于 2013-10-20T21:17:15.123 回答
0

如果您想在您的 css 文件中更具体地说明此表单，您可以执行以下操作：

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

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

#flexbox {
    width:120px;
}

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

#flexbox li{
    width:120px;
}

如果你使用后者，看起来像这样

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

于 2019-04-23T18:08:04.480 回答