我想创建 3 条白线，每条白线单独分隔菜单栏中的“家”、“关于我”和“我喜欢什么”。我已经为边框创建了线条，但我发现很难用 1px 纯白色将元素本身分开。任何帮助，将不胜感激。谢谢。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>It's all about me!</title>
</head>
<body>
<header>
<img src="me.jpg" alt="devon">
</div>
<h1>Ben's blog</h1>
<div class="grow">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutme.html">About me</a></li>
<li><a href="#">What I love</a></li>
</ul>
</div>
</header>
</body>
</html>
------------------(CSS below, in another file)-------------------------
body {
background-image: url(background.jpg);
}
header {
text-align: center;
color: white;
}
img {
border: 7px solid white;
border-radius: 15px;
}
a {
color: white;
text-decoration: none;
font-weight: bold;
}
ul {
padding: 10px;
background: black;
border-right: 1px solid white;
border-left: 1px solid white;
}
li {
display: inline;
padding: 0px 15px 0px 15px;
}
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
最佳答案
只需使用以下内容:
ul li:not(:last-child){
border-right:1px solid white;
}
如果您希望有尾随行，请删除 :not(:last-child)。
关于html - 如何创建线条来分隔菜单中的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25185481/