html换行符到表格中无效,解决HTML中换行符渲染成空白符问题

//html

• Home
• Spaceships
• Planets
• Stars

//css

nav {

display: block;

}

.navbar ul {

font-family: 'Avenir Next', Avenir, Corbel, sans-serif;

list-style: none;

padding: 0;

background-color: #486a8e;

}

.navbar li {

text-transform: uppercase;

display: inline-block;

text-align: center;

width: 25%;

-moz-box-sizing: border-box;

box-sizing: border-box;

background-color: #12459e;

outline: 1px solid #fff;

}

.navbar li a {

display: block;

text-decoration: none;

line-height: 1.75em;

padding: 1em;

color: #fff;

}

上述代码显示效果如下：

HTML源代码中的换行符被渲染成了空白符，再加上每一项25%的宽度，就导致了折行。要消灭这些空白符，可以尝试把所有

标签都排一行，但这种要求显示不友好。

解决方案一：把包含元素的font-size设置为0(从而让每个空格的宽度为0)，然后在每一项上重新设置大小：

.navbar ul{

font-size: 0;

}

.navbar li{

font-size: 1rem;

}

最终效果

解决方案二：使用表格显示属性实现布局：

.navbar ul{

display: table;

width: 100%;

table-layout: fixed;

}

.navbar li{

display: table-cell;

}