I am trying to left align logo and right align the ul li tag. I am using float but strangely the code is not working and I have no idea why it is not getting right aligned. Please take a look -
我试图左对齐徽标并右对齐ul li标签。我使用浮动，但奇怪的是代码不工作，我不知道为什么它没有正确对齐。请看一下 -
the problem is i think i have used the same code elsewhere and it seems to be working perfectly but this time around for some unknown reason it is mot working.
问题是我认为我在其他地方使用了相同的代码，它似乎工作得很好，但这一次出于某种未知的原因它是mot工作。
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Archivo Narrow', sans-serif;
font-family: 'Comfortaa', cursive;
*/
body {
font-family: 'Archivo Narrow', sans-serif;
}
.head {
width: 100%;
margin: 0 auto;
padding: 0px;
background-color: #855fa8;
}
.menu {
width: 1020px;
margin: 0 auto;
padding: 0px;
overflow: hidden;
padding-top: 20px;
}
.left-menu {
width: 15%;
float: left;
}
.left-menu img {
display: block;
width: 100%;
}
.right-menu {
width: 70%;
float: right;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:80px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'Archivo Narrow', sans-serif;
color: #fff;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}<div class="head">
<div class="menu">
<div class="left-menu">
<img src="http://i.imgur.com/MvTUZ36.png" alt="logo">
</div><!-- left menu -->
<div class="right-menu">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">About ￬</a>
<ul class="hidden">
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio ￬</a>
<ul class="hidden">
<li><a href="#">Photography</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Illustration</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- right menu -->
</div><!-- Menu -->
</div><!-- head --> 4 个解决方案
#1
2
You have to remove position:absolute from your ul#menu and float it to the right.
您必须从ul＃menu中删除position：absolute并将其浮动到右侧。
So, just add this to your css:
所以，只需将此添加到您的CSS：
ul#menu {
position: static;
float:right;
}
#2
0
Appears to work as intended if I knock the position:absolute off your UL and remove the fixed % width from the right-menu.
如果我敲定位置，似乎按预期工作：绝对关闭UL并从右菜单中删除固定的％宽度。
#3
0
Remove width: 1020px from .menu
从.menu删除宽度：1020px
Change .left-menu img from width:100% to width:130px
从宽度改变.left-menu img：100％到宽度：130px
Add body {overflow:hidden;}
添加正文{overflow：hidden;}
Change width: 70%; in .right-menu to width: 430px
改变宽度：70％;在.right-menu到width：430px
#4
-1
Use twitter bootstrap . Check this http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
使用twitter bootstrap。请查看http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
#1
2
You have to remove position:absolute from your ul#menu and float it to the right.
您必须从ul＃menu中删除position：absolute并将其浮动到右侧。
So, just add this to your css:
所以，只需将此添加到您的CSS：
ul#menu {
position: static;
float:right;
}
#2
0
Appears to work as intended if I knock the position:absolute off your UL and remove the fixed % width from the right-menu.
如果我敲定位置，似乎按预期工作：绝对关闭UL并从右菜单中删除固定的％宽度。
#3
0
Remove width: 1020px from .menu
从.menu删除宽度：1020px
Change .left-menu img from width:100% to width:130px
从宽度改变.left-menu img：100％到宽度：130px
Add body {overflow:hidden;}
添加正文{overflow：hidden;}
Change width: 70%; in .right-menu to width: 430px
改变宽度：70％;在.right-menu到width：430px
#4
-1
Use twitter bootstrap . Check this http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
使用twitter bootstrap。请查看http://www.w3schools.com/bootstrap/bootstrap_navbar.asp