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

Question

I have this css menu: 我有这个CSS菜单：

http://jsfiddle.net/L65dx02m/1/ http://jsfiddle.net/L65dx02m/1/

i want to be able to right align the menu and left align an image (as if it were a menu item but with no hover) 我希望能够右对齐菜单，左对齐图像（好像它是菜单项，但没有悬停）

i tried adding a class around the image and using float:left; 我试图在图像周围添加一个类，并使用float:left; and a class around the menu items with float:right but this done nothing 和一个围绕着float:right的菜单项的类float:right但这什么也没做

Answer 1

Just wrap your <img> and <ul> in a div and then float them. 只需将<img>和<ul>包裹在div中，然后将它们浮动即可。 For my example I used the <nav> as the wrapper and then styled the children (floating them, setting the height to 100%, etc) 在我的示例中，我使用<nav>作为包装器，然后为子项设置样式（浮动它们，将高度设置为100％等）

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

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

Answer 2

just change: 只是改变：

<li><a <img src="" width="130px" /></a></li>

to 至

<li style="float: left; text-align: left;"><a> <img src="" width="130px" /></a></li>

and add 并添加

text-align: right;

to your style under .int_menu {} 在.int_menu {}下的样式

Answer 3

Depending on your browser support you may opt to consider a flexbox solution to your problem if it was acceptable. 如果可以接受，则可以根据您的浏览器支持选择使用flexbox解决方案。

You can check out a nice reference to flexbox over @ css-tricks.com here . 您可以在@ css-tricks.com上找到有关 flexbox的不错参考。

I've put together the following snippet for reference, available on jsbin.com here . 我整理了以下代码段供参考，可在jsbin.com上找到。

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

 <!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>

I would personally be careful with having too many menu items though and look to condense them if possible into dropdowns etc. 我个人会注意菜单项太多，如果可能的话将其压缩到下拉菜单中。

Hope that helps you out! 希望对您有所帮助！

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

问题描述

3 个解决方案

解决方案1
2 已采纳 2015-09-01 23:34:37

解决方案2
0 2015-09-01 23:54:14

解决方案3
0 2015-09-02 00:15:18

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2015-09-01 23:34:37

解决方案2 0 2015-09-01 23:54:14

解决方案3 0 2015-09-02 00:15:18

解决方案1
2 已采纳 2015-09-01 23:34:37

解决方案2
0 2015-09-01 23:54:14

解决方案3
0 2015-09-02 00:15:18