边框有点问题

Question

I'm making a web page for restaurant.我正在为餐厅制作网页。 Design says, that I need a little line between page selectors.设计说，我需要在页面选择器之间留一点线。 Have already tried something, but thing worked.已经尝试过一些东西，但事情奏效了。

It's HTML5 and CSS3.它是 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>

I hope everything is not so bad :D Really need this help!我希望一切都不是那么糟糕 :D 真的需要这个帮助！

And this is what i would like to have: https://imgur.com/zxUhiSu/这就是我想要的： https : //imgur.com/zxUhiSu/

Answer 1

Added lines ( <hr> ) between your menu selectors在菜单选择器之间添加行 ( <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>

For the CSS I suggest you don't use !important对于 CSS，我建议您不要使用!important

A sample jsfiddle一个示例jsfiddle

边框有点问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-04-18 08:43:29

边框有点问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-04-18 08:43:29

解决方案1
1 已采纳 2019-04-18 08:43:29