[英]How to make UL list items in a single line
我是 HTML 的新手,我想弄清楚如何在一行中对齐 UL 列表项。
我刚刚开始学习 HTML。 我已经检查了 10 多个 Stack Overflow 问题,但没有一个有效。 这是代码:
display :inline;
float: right;
margin: 0px;
padding: 0px;
这是我的 html 标记,你能帮我检查一下是否有任何错误吗?
@font-face { font-family:'BrandonGrotesqueBold'; src: url('file:///C:/Users/MyName/Desktop/project/fonts/BrandonGrotesqueBold.ttf'); } @font-face { font-family:'BrandonGrotesqueLight'; src: url('file:///C:/Users/MyName/Desktop/project/fonts/BrandonGrotesqueLight.ttf'); } body { padding-top: 105px; color: #CDCDCD; font-family:'BrandonGrotesqueBold'; } .mainHeader { margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; width: 1060px; font-size: 22px; font-stretch: none; } .mainNav { margin-bottom: 70px; } .mainLogo { font-weight: 500; s color: black; font-size: 40px; } .thinMainLogo { font-family:'BrandonGrotesquelight'; } li { list-style-type: none; } .mainLoc { float: right; display: inline; }
<!DOCTYPE html> <title>My Company Name</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <header class="mainHeader"> <nav class="mainNav"> <h1 class="mainLogo">My <span class="thinMainLogo">Logo</span></h1> <ul class="mainLoc"> <li>About</li> <li>PortFolio</li> <li>Contact</li> <li>Blog</li> </ul> </nav> </header> </body> </html>
这是将它们放在同一行所需的 CSS:
ul.mainLoc li {
display: inline-block;
margin-left: 10px; // for item spacing
}
现在检查http://jsfiddle.net/bLc5eqgp/3/
.mainLoc li {
padding: 0 10px;
display: inline;
}
在 css 上面添加到你的小提琴。
将display: inline
添加到.mainLogo
并将display: inline-block
到li
这是完整的CSS
body {
padding-top: 105px;
color: #CDCDCD;
font-family:'BrandonGrotesqueBold';
}
.mainHeader {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
width: 1060px;
font-size: 22px;
font-stretch: none;
}
.mainNav {
margin-bottom: 70px;
}
.mainLogo {
font-weight: 500;
color: black;
font-size: 40px;
display: inline;
}
.thinMainLogo {
font-family:'BrandonGrotesquelight';
}
li {
display: inline-block;
list-style-type: none;
}
.mainLoc {
float: right;
display: inline;
}
检查这个JS Fiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.