Question

嗨我有一个列表，其中包含5个项目和一张照片。我希望“foto.png”位于列表之前。

现在看起来像这样： -

我想做的是：

以下是我的代码： -

 .headerbar {
    	text-align: right;
    	padding-top: 10px;
    
    }
    .profilephoto {
    	float: right;
    	margin: 0 auto;
    }
    .headerbar li {
    	color: white;
    	display: inline;
    	list-style: none;
    	margin: 7.5px;
    	font-weight: bold;
    	font-size: 18.5px;
    	font-family: "Dosis", Helvetica, sans-serif;
    }
    .headerbar li:last-child {
    	margin-right: 7.5px;
    	color: #ff5f5f;
    }

  <div class="headerbar">
        	<div class="profilephoto"><img src="/img/foto.png" width="60"></div>
        	<ul>
    			<li><a href="#"> Profile</a></li>
                <li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li>
                <li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li>
            	<li><a href="#">&#8226; &#8226; &#8226;</a></li>
                <li><a href="#">QUIT</a></li>
            </ul>
        </div>

Answer 1

你正在将foto.png浮动到右边...... 将.profilephoto和ul同时移至left，而不是right。

Answer 2

将图像放在列表中。

<div class="headerbar">
        <ul>
            // picture added here
            <li><img src="/img/foto.png" width="60"></li>
            <li><a href="#"> Profile</a></li>
            <li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li>
            <li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li>
            <li><a href="#">&#8226; &#8226; &#8226;</a></li>
            <li><a href="#">QUIT</a></li>
        </ul>
    </div>

你不必以这种方式使用浮点数，并且可以省略prophilephoto css类。

您仍然可以通过将其应用于li来添加边距：

 <li style="margin-left:20px;"><img src="/img/foto.png"  ></li>

或向li

添加一个类

 <li class="profilepic"><img src="/img/foto.png"  ></li>

和css：

.profilepic{
margin-left:20px;
}

Answer 3

我认为只需更改以下内容即可。之前：

.profilephoto {
    float: right;
    margin: 0 auto;
}

要：

.profilephoto {
    display: inline-block;
    margin: 0 5px 0 0;
}

Answer 4

在这种情况下不要使用float，你有display: inline-block;属性来解决这个问题。

更改此内容：

.profilephoto {
    float: right;
    margin: 0 auto;
}

对此：

.profilephoto {
    display: inline-block;
    vertical-align: middle;
}

示例：

＆＃13;
＆＃13;
.headerbar { text-align: right; padding-top: 10px; } .profilephoto { display: inline-block; vertical-align: middle; } .headerbar li { color: white; display: inline; list-style: none; margin: 7.5px; font-weight: bold; font-size: 18.5px; font-family: "Dosis", Helvetica, sans-serif; } .headerbar li:last-child { margin-right: 7.5px; color: #ff5f5f; }
＆＃13;
<div class="headerbar"> <ul> <div class="profilephoto"><img src="/img/foto.png" width="60"></div> <li> <a href="#"> Profile</a></li> <li><img src="/img/messages.png" width="18"> <a href="#">Messages</a></li> <li><img src="/img/notification.png" width="18"> <a href="#">Notifications</a></li> <li><a href="#">• • •</a></li> <li><a href="#">QUIT</a></li> </ul> </div>
＆＃13;
＆＃13;
＆＃13;

<强> Fiddle example

Answer 5

我想你想保持照片和列表彼此靠近？您可以将.profilephoto设为inline-block级元素并将列表向右浮动，查看演示：https://jsfiddle.net/gkaraliunas/8b8hsnys/

Answer 6

您将照片浮动到右侧！所以将它浮动到左：

.profilephoto {
    float: left;
}

如何在列表前找到图像？

6 个答案: