1

フォーム上の要素を揃えるのに問題があり、助けが必要です。CSSは私の強みではありません！

「Capacity」と「Week」を、「Park」、「Lecture Style」、「RoomStructure」の右側のスライダーと一緒に配置したいと思います。（つまり、新しい列として）

次に、チェックボックスを4行で適切に配置します。

これがこれまでの私のコードです、ここにjsfiddleを含めました：

<div id="search-1">
    <label>Park</label>
    <select name="">
        <option></option>
    </select>
    <br />
    <label>Lecture Style</label>
    <select name="">
        <option></option>
    </select>
    <br />
    <label>Room Structure</label>
    <select name="">
        <option></option>
    </select>
    <br />
    <label>Capacity</label>
    <input type="text" class="slider_text" disabled="disabled"
    />
    <br />
    <div class="slider"></div>
    <label>Week</label>
    <input type="text" class="slider_text2" disabled="disabled"
    />
    <br />
    <div class="slider2"></div>
    <label>Facilities</label>
    <input type="checkbox" name="fac">Chalk board
    <input type="checkbox" name="fac">Computer
    <input type="checkbox" name="fac">Data projector
    <input type="checkbox" name="fac">Dual data projector
    <input type="checkbox" name="fac">Induction loop
    <input type="checkbox" name="fac">Microphone
    <input type="checkbox" name="fac">OHP
    <input type="checkbox" name="fac">Review
    <input type="checkbox" name="fac">Visualiser
    <input type="checkbox" name="fac">Wheelchair access</div>
4

1 に答える 1

1

これが最初の試みです：http：//jsfiddle.net/h4Xxs/

  • 2列（それぞれ幅50％のフローティングdiv）
  • 各ラベルは、labelまだそうではないときに要素に入れられました
  • for各ラベルは、 /属性を介してそのフォーム要素に関連付けられていましidた（ラベルをクリックすると、そのフォーム要素が選択されます。さらにアクセスしやすくなります）
  • 凡例のあるフィールドセットのラジオボタンの束。境界線がなく、凡例に凡例があると、その上に凡例が表示された有名な灰色の境界線を認識できません。前の2つがフローティングであるため、フィールドセットはclear: bothクラスを介して持っています。.cleardiv
  • すべてのラジオボタンとその新しいラベルは、フローティング凡例の下に表示されないdivにあります。これは、このdivがを介して書式設定コンテキストを作成しているためですoverflow: hidden（そうしないと、ラジオボタンの2行目が凡例のすぐ下から始まります。ほとんどのテキストでは、右にテキスト、次に下img { float: left }にテキスト）
  • 4列のラジオボタンがありますが、1つのラベルに2行が必要であり、各ラベルに既存の幅8emが必要です。それがどのように見えるべきかわからないので、私はspan前に追加したsを上に垂直に揃えるだけでした（そうでなければ本当に醜いです）。必要に応じてレイアウトを自由に変更してください。

以上です。えーと、私が追加したすべてのアウトラインを削除してください、それらはより良い理解のためだけにあります！

HTML：

<div id="search-1">
    <div class="left w50">
        <p>
            <label for="a1">Park</label>
            <select name="" id="a1">
                <option></option>
            </select>
        </p>
        <p>
            <label for="a2">Lecture Style</label>
            <select name="" id="a2">
                <option></option>
            </select>
        </p>
        <p>
            <label for="a3">Room Structure</label>
            <select name="" id="a3">
                <option></option>
            </select>
        </p>
    </div>
    <div class="left w50">
        <p>
            <label for="b1">Capacity</label>
            <input type="text" class="slider_text" disabled="disabled" id="b1">
        </p>
        <div class="slider"></div>
        <label for="b2">Week</label>
        <input type="text" class="slider_text2" disabled="disabled" id="b2"
        />
        <div class="slider2"></div>
    </div>

    <fieldset class="clear">
        <legend>Facilities</legend>
        <div class="item">
        <span>
            <input type="checkbox" name="fac" id="ch1"><label for="ch1">Chalk board</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch2"><label for="ch2">Computer</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch3"><label for="ch3">Data projector</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch4"><label for="ch4">Dual data projector</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch5"><label for="ch5">Induction loop</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch6"><label for="ch6">Microphone</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch7"><label for="ch7">OHP</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch8"><label for="ch8">Review</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch9"><label for="ch9">Visualiser</label>
        </span>
        <span>
            <input type="checkbox" name="fac" id="ch10"><label for="ch10">Wheelchair access</label>
        </span>
            </div>
    </fieldset>
</div>

CSS：

body {
    font-family: 'segoe ui', arial, helvetica, sans-serif;
    padding-right: 20px;
    font-size: 14px;
}
.left {
    float: left;
    outline: 1px dotted green;
}
.clear {
    clear: both;
}
.w50 {
    width: 50%;
}

label {
    width: 8em;
    float: left;
    text-align: left;
    display: block;
}
select {
    width: 12em;
}
.slider, .slider2 {
    width: 100%;
    margin-top: 5px;
}
input {
    border: none;
    font-family:'segoe ui', arial, helvetica, sans-serif !important;
    font-size: 14px;
    padding: 0px;
    background-color: transparent;
}

fieldset {
    border: none;
    outline: 1px dashed blue;
}
fieldset > legend {
    float: left;
    padding: 0 1em 0 0;
    margin: 0;
}
fieldset .item {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
fieldset span {
    display: inline-block;
    width: 24%;
    outline: 1px dashed red;
}
fieldset label {
    float: none;
    display: inline-block;
    vertical-align: top;
}
于 2013-03-10T20:19:57.107 に答える