0

以下は、私が取り組んでいるテストページ全体です(まだ醜くて雑然としていることに気づきました)。私の問題はulclass="dropdown"にあります。SELECTの代わりになるので、スタイルを設定するつもりです(これもまだ完了していません)。しかし、私はそれを私が望む場所に配置することができないようです。FF3.5でこのページを見ると、それが私がそれを配置したい方法です。ただし、IE7では、ラベルに突き当たるのではなく、ULを次の行にプッシュしています。私はオンラインで見つけた多くのハックを試しましたが、どれも役に立たないようです。ここで何が欠けていますか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Radix Test Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body{
                margin:0;
                padding:1em;    
                font-family:arial,sans-serif;
            }

            .user-form li
            {
                background: #fff none no-repeat bottom right;
                border: 1px solid #000;
                margin: 0;
                padding-right: 35px;
                text-align: right;
            }

            .user-form li label
            {
                background: #fff; 
                border: 1px solid #333;
                display: -moz-inline-stack;    /* Support below FF3 */
                display: inline-block;        /* Used only to set width */
                padding: 1px 0;
                width: 10em;
            }

            .dropdown
            {
                border: 1px solid #f00;
                width: 20em;
                padding: 0;
                margin: 0;
                display:inline-block;
            }

            .dropdown , 
            .dropdown ul
            {
                list-style-type:none;
            }

            .dropdown li
            {
                text-align: left;
            }
        </style>
    </head>
    <body>
        <form id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" class="edit-on" action="/service/testclass.php">
            <fieldset>
                <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:id" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2" type="hidden"/>
                <ul class="user-form">
                    <li class="valid">
                        <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix">Prefix:</label>
                        <input value="Ms." id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix" name="name_prefix" type="hidden"/>
                        <ul class="dropdown">
                            <li>
                                <a href="#" class="trigger">Miss</a>
                            </li>
                            <li class="dropcontainer">
                                <ul class="dropdownhidden">
                                    <li>
                                        <a href="#">&nbsp;</a>
                                    </li>
                                    <li>
                                        <a href="#">Mister</a>
                                    </li>
                                    <li>
                                        <a href="#">Misses</a>
                                    </li>
                                    <li>
                                        <a href="#">Miss</a>
                                    </li>
                                    <li>
                                        <a href="#">Doctor</a>
                                    </li>
                                    <li>
                                        <a href="#">This is just a little test to see exactly how long this silly thing will make my option</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <input name="name_prefix_value" value="Mr." type="hidden"/>
                    </li>
                    <li class="valid">
                        <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name">Customer Last Name:</label>
                        <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:last_name" name="last_name" value="Jones" type="text"/>
                    </li>
                    <li class="valid">
                        <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name">My First Name:</label>
                        <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:first_name" name="first_name" value="George" type="text"/>
                    </li>
                    <li class="valid">
                        <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name">Middle Name:</label>
                        <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:middle_name" name="middle_name" type="text"/>
                    </li>
                    <li class="valid">
                        <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix">Suffix:</label>
                        <select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_suffix" name="name_suffix">
                            <option value="0"/>
                            <option value="Jr.">Junior</option>
                            <option value="Sr.">Senior</option>
                        </select>
                        <input name="name_suffix_value" type="hidden"/>
                    </li>
                    <li class="invalid">
                        <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date">Date of Birth:</label>
                        <input id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:birth_date" name="birth_date" type="text"/>
                    </li>
                    <li class="warning">
                        <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender">Gender:</label>
                        <select id="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:gender" name="gender">
                            <option value="0"/>
                            <option value="U">Unknown</option>
                            <option value="M">Male</option>
                            <option value="F">Female</option>
                        </select>
                        <input name="gender_value" type="hidden"/>
                    </li>
                </ul>
                <div class="form-actionbar">
                    <input name="form-edit" value="Edit" class="button-view" type="submit" disabled="disabled"/>
                    <input name="form-draft" value="Draft" class="button-edit" type="submit"/>
                    <input name="form-submit" value="Submit" class="button-edit" type="submit"/>
                    <input name="form-cancel" value="CancelMe" class="button-edit" type="submit"/>
                    <input name="form-suspend" value="Suspend" class="button" type="submit"/>
                </div>
            </fieldset>
        </form>
    </body>
</html>
4

3 に答える 3

0

<label> andin two separateおそらくテーブルに`sを入れてみることができます。このような:

............
    <fieldset>
            <input id="Hidden1" name="id" value="a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2"
                type="hidden" />
            <ul class="user-form">
                <li class="valid">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td style="vertical-align:bottom">
                                <label for="person.a82c3a5d-5f5e-5dbb-ae3a-14a093157dc2:name_prefix">
                                    Prefix:</label>
                            </td>
                            <td>
                                <ul class="dropdown">
                                    <li><a href="#" class="trigger">Miss</a> </li>
                                    <li class="dropcontainer">
                                        <ul class="dropdownhidden">
                                            <li><a href="#"></a></li>
                                            <li><a href="#">Mister</a> </li>
                                            <li><a href="#">Misses</a> </li>
                                            <li><a href="#">Miss</a> </li>
                                            <li><a href="#">Doctor</a> </li>
                                            <li><a href="#">This is just a little test to see exactly how long this silly thing
                                                will make my option</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                    <input value="Ms." id="Hidden2" name="name_prefix"
                        type="hidden" />
                    <input name="name_prefix_value" value="Mr." type="hidden" />
                </li>
............
于 2009-09-21T21:49:56.953 に答える
0

ULの後に非表示の入力フィールドを移動してみましたか?

于 2009-09-21T21:22:40.560 に答える
0

IE7 では、通常は「ie lt 7」スタイルシートに見られる、後続の規則でdisplay: inline-block;a を持つ css 規則を持つすべての要素に従う必要があります。display: inline;それはおそらくここで起こっていることですか?

于 2011-11-17T21:22:40.947 に答える