Question

请帮我解决这个问题。

我希望红色背景上的列表仅显示在一行中。我无法理解为什么最后一项是新的。

body {
  background-color: #F0F0F0;
  font: 14px/20px Arial, sans-serif; 
  color: #555;
  margin: 0 auto;
  max-width: 1080px;
}
a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: #FFF;
  text-decoration: underline;
}
header {
  background-color: #333;
  opacity: 0.90;
  box-sizing: border-box;
  width: 100%;
  height: 86px;
  top: 0;
  left: 0;
}
p#logo {
  float: left;
  color: #FFF;
  margin: 30px;
  font-size: 350%;
}
nav {
  display: table;
  height: 100%;
  background-color: #D50000;
  float: right; 
}
nav ul {
  display: table-cell;
  vertical-align: middle;
  padding-left: 10%;
  padding-right: 10%;
  vertical-align: middle;
  list-style: none;
}
nav ul li {
  float: left;
  padding-left: 3%;
  padding-right: 3%;
}

<body>
  <header>
    <p id="logo">Lago Siu</p>
    <nav>
      <ul>
        <li><a href="#" class="current">Home</a></li>
        <li><a href="#">Menu pranzo</a></li>
        <li><a href="#">Menu cena</a></li>
        <li><a href="#info">Info</a></li>
      </ul>
    </nav>
  </header>
</body>

我读过其他类似的问题，但我无法解决问题！

Answer 1

我基本上只是将<ul>中的<nav>更改为display: table，然后将所有内部<li>更改为display: table-cell，并将普通空格替换为牢不可破的空格{{ 1}}。

&nbsp;

body {
  background-color: #F0F0F0;
  font: 14px/20px Arial, sans-serif; 
  color: #555;
  margin: 0 auto;
  max-width: 1080px;
}
a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: #FFF;
  text-decoration: underline;
}
header {
  background-color: #333;
  opacity: 0.90;
  box-sizing: border-box;
  width: 100%;
  height: 86px;
  top: 0;
  left: 0;
}
p#logo {
  float: left;
  color: #FFF;
  margin: 30px;
  font-size: 350%;
}
nav {
  // display: table;
  height: 100%;
  background-color: #D50000;
  float: right; 
}
nav ul {
  display: table;
  vertical-align: middle;
  padding-left: 10%;
  padding-right: 10%;
  vertical-align: middle;
  list-style: none;
  height: 100%;
  margin: 0;
}
nav ul li {
    display: table-cell;
    padding-left: 5px;
    height: 100%;
    padding-right: 5px;
    vertical-align: middle;
}

Answer 2

基本上减少填充我编辑了CSS，所以4个列表项显示在一条水平线上：

[https://jsfiddle.net/arifbdev/73wpjz8v/]

Answer 3

您现在面临的真正痛苦在于，您使用的是所有宽度的百分比。

这听起来不错，但问题在于：父级将确定其内容的宽度，然后将其宽度设置为与其子级匹配，填充的百分比将是该宽度的百分比。如果子项的填充是基于百分比的（基于每个元素的不同宽度），那么您具有移动大小，这意味着父级需要重新调整其宽度，重新计算等等。

这不起作用。
此外，您还遇到了舍入错误，每个浏览器的回合略有不同。百分比很棒，直到你必须弄清楚有多少像素。

这甚至不是最外面的盒子是一定百分比的问题;父母的父母10％宽度的5％宽度意味着如果孙子向上舍入一个像素，则父母将向上舍入一个像素，意味着祖父母将围绕一个像素... < / p>

除非四舍五入另一种方式，否则你的孙子的宽度会减少，和/或你的父母有更少的空间容纳孩子。

不是将自己介绍给受伤的世界，而是建议如下：

始终对所有内容使用border-box（使用*而不是单独应用）
非常谨慎地使用边距，并且只有在没有其他任何东西出现在该线上时才能进行水平居中
更频繁地使用display: inline-block;，并在父级上使用text-align: center|left|right;来控制内容流
使用em和rem进行填充，其大小相对于您现在所在的小部件中的字体大小（em）或相对于默认字体大小（rem）;而不是font-size: 350%，您可以使用font-size: 3.5rem;
尝试使用命名良好的类（在BEM或SuitCSS中，或OOCSS样式，如果有帮助）进行样式设置，而不是依赖于HTML选择器或ID;我这样说，因为随着页面复杂性的增加，两组div div div span碰撞的可能性（因而变得不同的风格）会变得 非常高 .MediaPlayer-button与.CommentSection-submit发生碰撞的几率仍为0，只要CSS选择器不嵌套。

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  font: 14px/20px Arial, sans-serif;
}
/* I've moved most of the commonly-repeating housekeeping CSS into utility classes */

.u-floatLeft {
  float: left;
}
.u-floatRight {
  float: right;
}
.u-noMargin {
  margin: 0;
}
.u-inlineBlock {
  display: inline-block;
}
.u-table {
  display: table;
}
.u-tableCell {
  display: table-cell;
}
.u-fullHeight {
  height: 100%;
}
.Header {
  background-color: #333;
  /* by making the height REM-based, the header now updates in relative-size,
     as the base font-size changes, without needing to recalculate */
  height: 6rem;
}
.Logo {
  color: #fff;
  font-size: 3.5rem;
  /* === 350%, but is more idiomatic, as its text-based */
  /* by making the line-height match the parent height,
     the logo-text will align itself properly */
  line-height: 6rem;
  /* I don't need any other margin or padding, now, except to move it right;
     use margin, instead, if the text needed its own background-color */
  padding-left: 0.75em;
}
.HeaderNav {
  background-color: #d50000;
}
.HeaderNav-list {
  /* <ul> and <ol> have a margin and a padding-left by default */
  /* 150% of an EM at this font-size and font-family */
  padding: 0 1.5em;
  vertical-align: middle;
}
.HeaderNav-item {
  /* instead of % of total width, padding is now % of single EM */
  padding: 0 0.2em;
}
.HeaderNav-link {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.HeaderNav-link:hover {
  text-decoration: underline;
}
.HeaderNav-link--current {}

<!doctype html>

<html>

<head>
</head>

<body>
  <header class="Header">
    <h1 class="Logo u-floatLeft u-noMargin u-fullHeight">Lago Siu</h1>
    <nav class="HeaderNav u-table u-floatRight u-fullHeight">
      <ul class="HeaderNav-list u-tableCell u-noMargin u-fullHeight">
        <li class="HeaderNav-item u-inlineBlock">
          <a href="#" class="HeaderNav-link HeaderNav-link--current">Home</a>
        </li>
        <li class="HeaderNav-item u-inlineBlock">
          <a href="#" class="HeaderNav-link">Menu pranzo</a>
        </li>
        <li class="HeaderNav-item u-inlineBlock">
          <a href="#" class="HeaderNav-link">Menu cena</a>
        </li>
        <li class="HeaderNav-item u-inlineBlock">
          <a href="#" class="HeaderNav-link">Info</a>
        </li>
      </ul>
    </nav>
  </header>
</body>

</html>

我希望这有助于解决问题，并为将来发生的问题提供一些依据，以及如何解决这些问题。

具有内联块项的垂直列表CSS

3 个答案: