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

我寻找一些帮助解决与定位包含在其中具有相对定位一个div以下无序列表元素有一个问题IM：HTML/CSS - 如何正确定位这些嵌套的无序列表？

的UL的HTML结构：

• • 

  • Your name
  • Your email
• Messages
• Settings
• Password
• Sign out

和此列表的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 UI元素。

下图显示了它当前的样子。

我想实现如下：

有图像浮动的权利，并有“您的姓名”和“电子邮件”定位到图像的左边(基本上他们在哪里目前)。

感谢您的帮助提前。

山姆:)

2013-10-30

Samuroid