HTML / CSS - 如何正确定位这些嵌套的无序列表？

Question

我正在寻找一些帮助来解决一个问题，即定位以下无序列表元素，这些元素包含在具有相对定位的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元素。

下图显示了目前的情况。

我正在努力实现以下目标：

让图片浮动到右侧，并将“您的名字”和“您的电子邮件”放在图片的左侧（基本上位于图片的左侧）。

提前感谢您的帮助。

山姆：）

Answer 1

你的一半挣扎可能是在你的第一个孩子<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;
}