如何在一行中制作 UL 列表項

Question

我是 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>

http://jsfiddle.net/bLc5eqgp/3/

Answer 1

這是將它們放在同一行所需的 CSS：

ul.mainLoc li {
    display: inline-block;
    margin-left: 10px; // for item spacing
}

Answer 2

現在檢查http://jsfiddle.net/bLc5eqgp/3/

.mainLoc li {
    padding: 0 10px;
    display: inline;
}

在 css 上面添加到你的小提琴。

Answer 3

將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

如何在一行中制作 UL 列表項

問題描述

3 個解決方案

解決方案1
4 2015-07-08 16:29:47

解決方案2
1 2015-07-08 16:33:24

解決方案3
0 2015-07-09 19:17:50

如何在一行中制作 UL 列表項

問題描述

3 個解決方案

解決方案1 4 2015-07-08 16:29:47

解決方案2 1 2015-07-08 16:33:24

解決方案3 0 2015-07-09 19:17:50

解決方案1
4 2015-07-08 16:29:47

解決方案2
1 2015-07-08 16:33:24

解決方案3
0 2015-07-09 19:17:50