邊框有點問題

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 個解決方案

解決方案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