2
我正在嘗試左對齊標誌並右對齊ul li標籤。我正在使用float，但奇怪的代碼不工作，我不知道爲什麼它沒有得到正確的對齊。請看看 -Ul Li標籤不能正確對齊
問題是我認爲我在其他地方使用了相同的代碼，它似乎是完美的工作，但這次出於某種未知的原因，它是摩托羅拉工作。
@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 {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t 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 {
\t width: 100%;
\t margin: 0 auto;
\t padding: 0px;
\t background-color: #855fa8;
}
.menu {
\t \t width: 1020px;
\t \t margin: 0 auto;
\t \t padding: 0px;
\t \t overflow: hidden;
\t \t padding-top: 20px;
}
\t .left-menu {
\t \t \t width: 15%;
\t \t \t float: left;
\t }
\t
\t \t .left-menu img {
\t \t \t \t \t display: block;
\t \t \t \t \t width: 100%;
\t \t }
\t \t
\t
\t
\t .right-menu {
\t \t \t width: 70%;
\t \t \t float: right;
\t }
/*Strip the ul of padding and list styling*/
ul {
\t list-style-type:none;
\t margin:0;
\t padding:0;
\t position: absolute;
}
/*Create a horizontal list with spacing*/
li {
\t display:inline-block;
\t float: left;
\t margin-right: 1px;
}
/*Style for menu links*/
li a {
\t display:block;
\t min-width:80px;
\t height: 50px;
\t text-align: center;
\t line-height: 50px;
\t font-family: 'Archivo Narrow', sans-serif;
\t color: #fff;
\t text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
\t background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
\t background: #f3f3f3;
\t color: #2f3036;
\t height: 40px;
\t line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
\t background: #19c589;
\t color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
\t display: none;
}
/*Make dropdown links vertical*/
li ul li {
\t display: block;
\t float: none;
}
/*Prevent text wrapping*/
li ul li a {
\t width: auto;
\t min-width: 100px;
\t padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
\t display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
\t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
\t text-decoration: none;
\t color: #fff;
\t background: #19c589;
\t text-align: center;
\t padding: 10px 0;
\t 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){
\t /*Make dropdown links appear inline*/
\t ul {
\t \t position: static;
\t \t display: none;
\t }
\t /*Create vertical spacing*/
\t li {
\t \t margin-bottom: 1px;
\t }
\t /*Make all menu links full width*/
\t ul li, li a {
\t \t width: 100%;
\t }
\t /*Display 'show menu' link*/
\t .show-menu {
\t \t display:block;
\t }
}<div class="head">
\t \t \t <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 -->
你應該做的第一件事就是學習的基地HTML和CSS。 div元素是一個塊元素，意味着寬度總是100％，如果你的div是100％，爲什麼你設置margin：0 auto; ???作爲CSS規則，你設置所有的div將有填充：0;所以你爲什麼設置填充：0;再次。 – 2016-12-04 13:03:22