Question

如何将它们放在一条线上？ Here's a link，任何帮助都会受到赞赏！

body {
  background-color: white;
}

ul {
  list-style-type: none;
  text-align: center;
  margin: 0auto;
  padding: 0px;
  display: block;
  overflow: hidden;
}

li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Answer 1

有很多选择，例如

内联块：

li {
  display: inline-block;
}

Flexbox的：

ul {
  display: flex;
}

浮子：

ul:after {
  content: "";
  display: table;
  clear: both;
}
li {
  float: left;
}

CSS表：

ul {
  display: table;
}
li {
  display: table-cell;
}

Answer 2

如果您希望将该背景保留在li的内嵌块中，请将其从li a中删除，而不是将其放在ul

上

＆＃13;

body { background-color:white;
}
ul { list-style-type:none; text-align:center; margin:0auto; padding:0px; display:block; overflow:hidden; background:#dddddd;}   
 
li { display:inline-block; }

li a {display:block; padding:8px; background-color: #dddddd;}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="prova.css">
</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>

</html>

＆＃13;

如何将导航栏链接放在一行？

2 个答案: