我正在为餐厅制作网页。设计说，我需要在页面选择器之间划一条线。已经尝试过一些东西，但效果很好。
它是 HTML5 和 CSS3。
* {
margin: 0em;
padding: 0em;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
background: url(https://images.unsplash.com/photo-1526234362653-3b75a0c07438?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80) black no-repeat center center fixed;
background-size: cover;
}
h1 {
color: white;
font-size: 50px;
text-transform: uppercase;
text-align: center;
font-weight: normal;
padding: 5% 0 13%;
}
ul {
list-style-type: none;
padding: 10px 20px;
background: black;
box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.95);
border-radius: 10px;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
}
a:hover {
line-height: 0 !important;
transform: scale(1.5) !important;
transition: all 1s ease !important;
color: wheat;
}
.menu {
font-size: 32px;
width: 75%;
margin: auto;
max-width: 960px;
}
.left {
float: left;
text-align: right;
border-right: solid white;
padding-right: 25px;
}
.right {
float: right;
text-align: left;
border-left: solid white;
padding-left: 25px;
}
a {
list-style-position: inside;
border: 1px solid white;
}<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
</body>我希望一切都不会那么糟糕 :D 真的需要这个帮助!
这就是我想要的: https://imgur.com/zxUhiSu/
最佳答案
在菜单选择器之间添加行 ( <hr>)
<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
对于 CSS，我建议您不要使用 !important
样本 jsfiddle
关于html - 边界有问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55742005/