0

私はこのコードを持っています:

    <form action="#" method="get">
        <fieldset>
            <div>   
                <label for="profilephoto">Your profile photo</label>
                <input type="file" name="profilephoto" id="profilephoto" />
            </div>
            <div>
                <label for="firstname">Your first name</label>
                <input type="text" name="firstname" id="firstname" />
            </div>
            <div>
                <label for="lastname">Your last name</label>
                <input type="text" name="lastname" id="lastname" />
            </div>
            <div>
                <label for="gender">Gender</label>
                <input type="radio" name="gender" value="female" id="female" />
                <label for="female">Female</label>
                <input type="radio" name="gender" value="male" id="male" />
                <label for="male">Male</label>
            </div>
            <div>
                <label for="birthdategroup">Birth Date</label>
                <select name="Month">
                    <option value="none">- Month -</option>
                    <option value="January">January</option>
                    <option value="February">February</option>
                    <option value="March">March</option>
                    <option value="April">April</option>
                    <option value="May">May</option>
                    <option value="June">June</option>
                    <option value="July">July</option>
                    <option value="August">August</option>
                    <option value="September">September</option>
                    <option value="October">October</option>
                    <option value="November">November</option>
                    <option value="December">December</option>
                </select>
                    <select name="Day">
                    <option value="none">- Day -</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="22">30</option>
                    <option value="29">31</option>

                </select>
                <select name="year">
                    <option value="none">- Year -</option>
                    <option value="1993">1993</option>
                    <option value="1994">1994</option>
                    <option value="1995">1995</option>
                </select>
                <p>This is hidden by fault from your profile.</p>
            </div>
            <div>
                <label for="about">About you</label>
                <textarea id="about" rows="9" cols="30"></textarea>
            </div>
            <div>
                <label for="websiteaddress">Your website address
                </label>
                <input type="text" id="websiteaddress" name="websiteaddress" />
            </div>
            <div>
                <label for="websitename">Website name</label>
                <input type="text" id="websitename" name="websitename" />
            </div>
            <div>
                <span>preview profile</span> <input type="submit" value="save"/>
            </div>


        </fieldset>
    </form>

そして、望ましいデザインはこれです: http://d.pr/i/WZ0U

問題は、ラベルにパディングと幅を追加してこれを整列させようとしたことですが、ラジオ ボタンに独自のラベル (男性と女性) がある場合、これらのボタン間のスペースも増加しますが、これは望ましくありません。

これをどのようにスタイリングできますか？また、各ラジオボタンにはすでに独自のラベルがあるため、「性別」に3番目のラベルを使用することは本当に適切ですか?

4

2 に答える 2

1

ラベルにクラスを追加します。たとえば、ラジオ ボックスのラベルに異なるスタイルが必要な場合、他のラベルはそれらのラベルに特定のクラスを追加します。

<label class="radio">text</label>
<label class="input">text</label>
...

次に、css でクラスを使用します。

それ以外の

label {css code}

使用する

.radio {css code}

など、異なるラベルに異なる CSS を与えることができます。

于 2012-12-19T22:43:47.410 に答える
0

「奇数」ラベルにクラス名を付けて、個別にスタイルを設定します。

また、DIV よりもスタイル付きの順序なしリストをコンテナーとして使用する方が適切です。

参照: http://www.alistapart.com/articles/prettyaccessibleforms

于 2012-12-19T22:43:13.423 に答える