html - CSSフォームの位置合わせの問題

Question

JSPを使用してhtmlフォームを設計しています。以下は私のcssファイルです-

    body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial,
        Helvetica, sans-serif;
    font-size: 12px;
}

p,h1,form,button {
    border: 0;
    margin: 0;
    padding: 0;
}

.spacer {
    clear: both;
    height: 1px;
}
/* ----------- My Form ----------- */
.myform {
    margin: 0 auto;
    width: 400px;
    padding: 14px;
}

/* ----------- stylized ----------- */
#stylized {
    border: solid 2px #b7ddf2;
    background: #ebf4fb;
}

#stylized h1 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}

#stylized p {
    font-size: 11px;
    color: #666666;
    margin-bottom: 20px;
    border-bottom: solid 1px #b7ddf2;
    padding-bottom: 10px;
}

#stylized label {
    display: block;
    font-weight: bold;
    text-align: right;
    width: 140px;
    float: left;
}

#stylized .small {
    color: #666666;
    display: block;
    font-size: 11px;
    font-weight: normal;
    text-align: right;
    width: 140px;
}

#stylized input {
    float: left;
    font-size: 12px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 200px;
    margin: 2px 0 20px 10px;
    height: 30px;
}

#stylized checkbox {
    float: left;
    font-size: 12px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 10px;
    margin: 2px 0 20px 10px;
}

#stylized select {
    float: left;
    font-size: 12px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 250px;
    margin: 2px 0 20px 10px;
    height: 100px;
}

#stylized button {
    clear: both;
    margin-left: 150px;
    width: 125px;
    height: 31px;
    background: #666666 url(img/button.png) no-repeat;
    text-align: center;
    line-height: 31px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

以下は、JSPを使用して作成しているフォームです。

<div id="stylized" class="myform">

        <form:form id="form" name="form" method="POST" action="/showResponse">
            <h1>Service call Form</h1>
            <p></p>

            <form:label path="userId">User Id
                <span class="small">Enter User Id</span>
            </form:label>
            <form:input name="name" id="name" path="userId" />

            <form:label path="debugFlag">Debug Flag :
                <span class="small">Select Debug Flag</span>
            </form:label>
            <form:checkbox path="debugFlag" name="name" id="name" />


            <form:label path="attributeNames">Attribute Names :
                <span class="small">Select Attribute Names</span>
            </form:label>
            <form:select path="attributeNames" items="${attributeNamesList}"
                multiple="true" name="name" id="name" />

            <form:label path="machineName">Machine Name
                <span class="small">Enter Machine Name</span>
            </form:label>
            <form:input name="name" id="name" path="machineName" />

            <form:label path="portNumber">Port Number
                <span class="small">Enter Port Number</span>
            </form:label>
            <form:input path="portNumber" name="name" id="name" />


            <button type="submit">Submit</button>
            <div class="spacer"></div>

        </form:form>
    </div>

私が直面している唯一の問題は、ラベルと対応する入力と適切に位置合わせされていないことです。以下はスクリーンショットです-

ここに画像の説明を入力してください

ユーザーIDとデバッグフラグのみが適切に割り当てられます。それ以外はなんとなくめちゃくちゃです。CSSで何が間違っているのか誰か教えてもらえますか？

ページソースの表示を行った後の実際のHTMLコード-

<html>
<head><link href="/ressvr/z/u4/apo4x4yiqe23jo4erdz5ig4tm.css?dataUri=true" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="layout" content="main" />
    <title>Sample App</title>
</head><body><div id="stylized" class="myform">

        <form id="form" name="form" action="/showResponse" method="POST"><h1>Service call Form</h1>
            <p></p>

            <label for="userId">User Id
                <span class="small">Enter User Id</span>
            </label><input id="name" name="userId" name="name" type="text" value=""/><div class="spacer"></div>

            <label for="debugFlag">Debug Flag
                <span class="small">Select Debug Flag</span>
            </label><input id="name" name="debugFlag" name="name" type="checkbox" value="true"/><input type="hidden" name="_debugFlag" value="on"/><div class="spacer"></div>

            <label for="attributeNames">Attribute Names
                <span class="small">Select Attribute Names</span>
            </label><select id="name" name="attributeNames" name="name" multiple="multiple"><option value="ACCOUNT">ACCOUNT</option><option value="ADVERTISING">ADVERTISING</option><option value="INFORMATION">INFORMATION</option></select><input type="hidden" name="_attributeNames" value="1"/><div class="spacer"></div>

            <label for="machineName">Machine Name
                <span class="small">Enter Machine Name</span>
            </label><input id="name" name="machineName" name="name" type="text" value=""/><div class="spacer"></div>

            <label for="portNumber">Port Number
                <span class="small">Enter Port Number</span>
            </label><input id="name" name="portNumber" name="name" type="text" value=""/><div class="spacer"></div>

            <button type="submit">Submit</button>
            <div class="spacer"></div>

        </form></div>
</body></html>

score 1 · Accepted Answer

すべての入力の幅を同じに設定しています。チェックボックスに200pxの幅は必要ありません。

さまざまな入力タイプにさまざまなクラス名を付け、これらを個別にスタイル設定します。

フォームを順序付けられていないリストでラップして、間隔を制御し、フロートをクリアできるようにすることもできます。

<fieldset>
  <legend>Delivery Details</legend>
  <ol>
    <li>
      <label for="name">Name<em>*</em></label>
      <input id="name" />
    </li>
    <li>
      <label for="address1">Address<em>*</em></label>
      <input id="address1" />
    </li>
    <li>
      <label for="address2">Address 2</label>
      <input id="address2" />
    </li>
    <li>
      <label for="town-city">Town/City</label>
      <input id="town-city" />
    </li>
    <li>
      <label for="county">County<em>*</em></label>
      <input id="county" />
    </li>
...

これは非常に優れたガイドです：http：//www.alistapart.com/articles/prettyaccessibleforms/

score 0 · Accepted Answer

clear：both;を追加する必要があるようです。<div class="spacer"></div>フォーム要素に追加するか、各フォーム要素の間にタグを使用します。

score -1 · Accepted Answer

別の方法として、Tableタグを使用してhtmlコントロールを適切な形式で配置することもできます。

html - CSSフォームの位置合わせの問題

3 に答える 3

Related

Reference