html - 将 ul 列表移到 div 下面

Question

我正在尝试将这个 ul 移动到 div 下面，我什至不确定这是否也是完美的方法，

这是代码，

HTML

<div class="first">
    <div id="Pic">
        <img src="http://48jwh53mcwj217jvx11dcwjj.wpengine.netdna-cdn.com/wp-content/uploads/2013/07/avatar-2.jpg">
    </div>
    <div id="Name" class="left"> <span>User 1</span>

    </div>
    <div id="contactDetails" class="left">
        <ul style="float: left;">
            <li>
                <img src="https://tutorials.hostmonster.com/help_media/email.png"><span id="Email">user1@gov.com</span>

            </li>
            <li>
                <img src="https://tutorials.hostmonster.com/help_media/email.png"><span id="PhoneNumber">000000</span>

            </li>
        </ul>
    </div>
    <div style="clear: both;"></div>
</div>

CSS

#Pic img {
    width: 128.5px;
    height: 128px;
    /* padding: 10px 7px 10px 7px; */
    float: left;
    border: 1px solid lightgrey;
    margin-top: 4px;
    margin-right: 5px;
}
#Name {
    font-family:"Segoe UI Light", "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
    font-size: 2.3em;
    color: #777;
    font-weight: 200;
}
.left {
    float:left;
}

fiddle

http://jsfiddle.net/fc2oya05/1/

我希望它看起来像什么

Answer 1

看看你的updated fiddle

您需要从您的 div 中删除 float ，

.left{
/* float:left; */
}

并且您应该将 ul 中的 float 替换为以下内容以删除列表中的元素符号

<ul style="list-style-type: none;">