Question

我有这个css菜单：

我希望能够右对齐菜单并左对齐图像（就像它是一个菜单项但没有悬停）

我尝试在图片周围添加一个类并使用float:left;和一个带有float:right的菜单项周围的类，但这没有做任何事情

Answer 1

只需将<img>和<ul>包裹在div中，然后将其浮动即可。对于我的例子，我使用<nav>作为包装，然后设置孩子的样式（浮动它们，将高度设置为100％等）

<nav>
     <img>
     <ul>
</nav>

http://jsfiddle.net/L65dx02m/6/

Answer 2

只是改变：

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

下的风格

Answer 3

根据您的浏览器支持，如果可以接受，您可以选择flexbox解决问题。

您可以通过@ css-tricks.com here查看对flexbox的精彩参考。

我已将以下代码段放在一起供参考，可在jsbin.com here上找到。

＆＃13;

* {
  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;

我个人会因为有太多的菜单项而小心，并且如果可能的话将它们压缩成下拉菜单等。

希望能帮到你！

CSS菜单 - 左对齐图像和右对齐菜单项

3 个答案: