Есть проблемы с границами - PullRequest
Новая
       2

Есть проблемы с границами

1 голос
/ 18 апреля 2019

Я делаю веб-страницу для ресторана. Дизайн говорит, что мне нужна небольшая грань между селекторами страниц. Уже что-то пробовал, но все заработало.

Это 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/

1 Ответ

1 голос
/ 18 апреля 2019

ScreenShot Добавлены строки (<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 я предлагаю не использовать ! Важно

Образец jsfiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...