1

相対位置を持つ div に含まれる次の順序付けられていないリスト要素の配置に関する問題を解決するための助けを探しています:

UL の html 構造:

<div id="accountBox" class="account_settings_box">
    <ul>
        <ul>
            <li class="profileImage">
                <img src="images/profileimage.jpg" alt="Profile Image" />
            </li>
            <li class="profileName">Your name</li>
            <li class="profileEmail">Your email</li>
        </ul>
        <li><a href="">Messages</a></li>
        <li><a href="">Settings</a></li>
        <li><a href="">Password</a></li>
        <li><a href="">Sign out</a></li>
    </ul>
</div>

そして、このリストの CSS:

.account_settings_box ul ul  {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 150px;
    outline: 1px solid blue;
}

.account_settings_box ul ul li {
    display: inline-block;
    border: none; /* Reset the border */
}

.profileImage {
    float: right;
    display: block;
    width: 150px;
    height: 150px;
    outline: 1px solid purple;
}

.profileName, .profileEmail {
    width: auto;
    height: auto;
    width: 150px;
    height: 150px;
}

.account_settings_box ul ul li:hover {
    outline: 1px solid red;
}

.profileImage img {
    width: 150px;
    height: 150px;
}

埋め込まれた ul、つまり .account_settings_box ul ul 要素に問題があります。

下の画像は、現在の様子を示しています。

私は次のことを達成しようとしています:

画像を右側に浮かせ、「名前」と「メールアドレス」を画像の左側 (基本的には現在の場所) に配置します。

順序付けられていないリストのスクリーンショット

事前にご協力いただきありがとうございます。

サム:)

4

1 に答える 1

0

苦労の半分は<ul>、親要素の下にネストされた最初の子要素の周りにある可能性が高く、これは独自の 内に含まれている必要があります<li>。

<div id="accountBox" class="account_settings_box">
                            <ul>
                               <li>
                                    <ul>
                                        <li class="profileImage"><img src="images/profileimage.jpg" alt="Profile Image" /></li>
                                        <li class="profileName">Your name</li>
                                        <li class="profileEmail">Your email</li>
                                    </ul>
                                </li>
                                <li><a href="">Messages</a></li>
                                <li><a href="">Settings</a></li>
                                <li><a href="">Password</a></li>
                                <li><a href="">Sign out</a></li>
                            </ul>
                        </div>

そこから、次のように CSS を更新する必要があると思います。

.account_settings_box ul  {
    margin: 0;
    padding: 0;
    width: 100%;
    outline: 1px solid blue;
}

.account_settings_box ul li ul { display: block; }

.account_settings_box ul > li {
    display: block;
    overflow: hidden;
    border: none; /* Reset the border */
}

.profileImage {
    float: right;
    width: 150px;
    height: 150px;
    outline: 1px solid purple;
}

.profileName, .profileEmail {
    overflow: hidden;
    width: 150px;
    height: 150px;
}

.account_settings_box ul ul li:hover {
    outline: 1px solid red;
}

.profileImage img {
    width: 150px;
    height: 150px;
}
于 2013-10-30T21:43:10.303 に答える