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 回答