Question

我想创建3条白色线条，每条线条单独分开＆＃34; home＆＃34;，＆＃34; about me＆＃34;和＃34;我喜欢什么＆＃34;在菜单栏中。我已经为边框创建了线条，但我发现很难用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);
}

Answer 1

只需使用以下内容：

ul li:not(:last-child){
    border-right:1px solid white;
}

如果您希望有一个尾随行，请删除:not(:last-child)。

如何创建行来分隔菜单中的项目？

1 个答案: