Question

我正在为餐厅创建一个网页。设计说，我需要在页面选择器之间加一点线。已经尝试过一些东西，但是一切正常。

是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/

Answer 1

在菜单选择器之间添加了行（<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

边界有些麻烦

1 个答案: