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;
}

小提琴

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

我希望它看起来像什么

Answer 1

查看您的updated fiddle

您需要从div中删除浮动

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

您应该使用以下内容替换ul中的浮动以删除列表中的项目符号

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

Answer 2

在您的css文件中添加以下代码： Demo 。如果您想要具体，请为<ul>

添加类/ ID

ul{
    clear:both;
    font-size:12px;   
    margin:0;
    padding:0;
}
li{
    list-style-type:none;
}

Answer 3

将姓名和ContactDetails换行到另一个具有班级self.sched._executors['default']._logger = self.schedlogger的div：

HTML：

left

CSS：

<div class="first">
    <div id="Pic">
        <img src="http://48jwh53mcwj217jvx11dcwjj.wpengine.netdna-cdn.com/wp-content/uploads/2013/07/avatar-2.jpg">
    </div>
    <div class="left">
        <div id="Name"> <span>User 1</span></div>
        <div id="contactDetails">
            <ul>
                <li>
                    <img src="https://tutorials.hostmonster.com/help_media/email.png" class="left"><span id="Email">user1@gov.com</span>

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

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

Updated demo

Answer 4

<div id="Name" class="left">

删除课程表名称ID

<div id="Name">

demo

Answer 5

在一个div syn region cFoldMarkers start='>>>' end='<<<' containedin=cComment transparent fold中包装名称和详细信息，并将类<div class="userDetails"></div>移除到某些元素。更新了fiddle

Answer 6

您可以查看以下链接。你只需要删除float：left。

Fiddle

.left{
     margin-left:13%;
    }

Answer 7

CSS

.UIClass{
    float: left;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

这是我的Demo

Answer 8

您可以查看以下链接。

Demo

#Email
{
    margin-left:10px;
}
#PhoneNumber
{
   margin-left:10px; 
}

移动div下面的ul列表

8 个答案: