我有这个css菜单:
http://jsfiddle.net/L65dx02m/1/
我希望能够右对齐菜单并左对齐图像(就像它是一个菜单项但没有悬停)
我尝试在图片周围添加一个类并使用float:left;
和一个带有float:right
的菜单项周围的类,但这没有做任何事情
答案 0 :(得分:2)
只需将<img>
和<ul>
包裹在div中,然后将其浮动即可。对于我的例子,我使用<nav>
作为包装,然后设置孩子的样式(浮动它们,将高度设置为100%等)
<nav>
<img>
<ul>
</nav>
答案 1 :(得分:0)
只是改变:
<li><a <img src="" width="130px" /></a></li>
到
<li style="float: left; text-align: left;"><a> <img src="" width="130px" /></a></li>
并添加
text-align: right;
在.int_menu {}
下的风格答案 2 :(得分:0)
根据您的浏览器支持,如果可以接受,您可以选择flexbox
解决问题。
您可以通过@ css-tricks.com here查看对flexbox
的精彩参考。
我已将以下代码段放在一起供参考,可在jsbin.com here上找到。
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.myHeader {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
background-color: red;
color: white;
}
.myHeader__nav a {
padding: 5px;
cursor: pointer;
}
.myHeader__nav a:hover {
background-color: white;
color: red;
}
&#13;
<!DOCTYPE html>
<head></head>
<body>
<header class="myHeader">
<a class="myHeader__title">
<img src="" alt="mySite">
</a>
<nav class="myHeader__nav">
<a>Homepage</a>
<a>About us</a>
<a>Services</a>
<a>Login</a>
<a>Support</a>
<a>Contact us</a>
</nav>
</header>
</body>
&#13;
我个人会因为有太多的菜单项而小心,并且如果可能的话将它们压缩成下拉菜单等。
希望能帮到你!