下图指向当前UI:
给定的html和css代码:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Flexbox example page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<ul class="site-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Support</a></li>
<li class="nav-right"><a href="#">About</a></li>
</ul>
</nav>
</body>
</html>
*,
::before,
::after {
box-sizing: border-box;
}
body {
margin: unset;
background-color: #709b90;
font-family: Helvetica, Arial, sans-serif;
}
.site-nav {
display: flex;
padding: 0.5rem;
list-style-type: none;
background: #5f4b44;
}
.site-nav > li > a {
text-decoration: none;
color: white;
background: #cc6b5a;
padding: 0.5em 1em;
}
原来的问题是在应用以下CSS后出现的:
.site-nav > li > a {
display: block;
}
最终的用户界面:
最终的 UI 是我所期望的,但我无法弄清楚 css 在这里是如何工作的。
我尝试了开发工具,看来
block
值会导致元素占据其父元素的整个宽度,从而引入换行符。这会将导航项内容的高度增加到 1px
。
display: block
属性如何影响 UI?function f(){
document.querySelectorAll('.site-nav > li > a')
.forEach( el => {
el.classList.toggle('block');
});
}
*,
::before,
::after {
box-sizing: border-box;
}
body {
margin: unset;
background-color: #709b90;
font-family: Helvetica, Arial, sans-serif;
}
.site-nav {
display: flex;
padding: 0.5rem;
list-style-type: none;
background: #5f4b44;
}
.site-nav > li > a {
text-decoration: none;
color: white;
background: #cc6b5a;
padding: 0.5em 1em;
}
/*.site-nav > li > a,*/
.block {
display: block;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Flexbox example page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<ul class="site-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Support</a></li>
<li class="nav-right"><a href="#">About</a></li>
</ul>
</nav>
<button onclick="f();">asdf</button>
</body>
</html>