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 に答える