• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak pozbyć się niechcianego odstępu między obramowaniem a tekstem w menu?

Object Storage Arubacloud
0 głosów
133 wizyt
pytanie zadane 28 lutego w HTML i CSS przez whiteman808 Obywatel (1,820 p.)

Potrzebuję się pozbyć niechcianego odstępu między tekstem a czarnym prawostronnym obramowaniem elementu nav ul li. Chcę zrobić menu dla księgi gości w HTML5 i CSS3.

Plik HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/styles.css">
    <title>Guest book - Main page</title>
</head>
<body>
    <header class="page-header">
        <h1>Guest book</h1>
        <p>Yet another page written in PHP</p>
    </header>
    <nav>
        <ul>
            <li><a href="index.php">Index</a></li>
            <li><a href="index.php?action=new_entry">New entry</a></li>
            <li><a href="index.php?action=register">Register</a></li>
            <li><a href="index.php?action=login">Login</a></li>
        </ul>
    </nav>
    <main class="guestbook-entries">
        <article>
            <header>
                <h2>Entry title</h2>
                <p>Author: whiteman808</p>
                <p>Date: <?=date("Y-m-d H:i:s")?></p>
            </header>
            <section>
                <p>An entry in the guest book...</p>
            </section>
        </article>
        <article>
            <header>
                <h2>Entry title</h2>
                <p>Author: whiteman808</p>
                <p>Date: <?=date("Y-m-d H:i:s")?></p>
            </header>
            <section>
                <p>An entry in the guest book...</p>
            </section>
        </article>
    </main>
    <footer class="page-footer">
        <p>Made by whiteman808</p>
    </footer>
</body>
</html>

Plik CSS

body {
    background-color: #ffffcc;
    width: 60%;
    margin: 0 auto;
}

nav ul {
    list-style-position: inside;
    list-style-type: none;
    padding: 0;
    border: 3px solid #000;
    display: inline;
}

nav ul li {
    padding: 0;
    display: inline;
}

nav ul li:not(:last-child) {
    border-right: 3px solid #000;
}

nav ul li a {
    color: #000;
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
}

.page-header {
    margin-top: 75px;
}

.guestbook-entries {
    margin-top: 75px;
}

.guestbook-entries article:not(:last-child) {
    border-bottom: 1px solid black;
}

.page-footer {
    margin-top: 75px;
    text-align: center;
}

Czerwoną obwódką zaznaczyłem niechciany odstęp

2 odpowiedzi

+1 głos
odpowiedź 29 lutego przez VBService Ekspert (252,660 p.)
edycja 29 lutego przez VBService

Proponuje użyć flex i element + element

[ przykład działania on-line ]

nav ul {
  display: flex;
  list-style-type: none;
  padding: 0;
}

nav ul li {
  border: 3px solid #000;
}

nav ul li + li {
  border-left: none;
}
    <nav>
        <ul>
            <li><a href="index.php">Index</a></li>
            <li><a href="index.php?action=new_entry">New entry</a></li>
            <li><a href="index.php?action=register">Register</a></li>
            <li><a href="index.php?action=login">Login</a></li>
        </ul>
    </nav>

0 głosów
odpowiedź 29 lutego przez SzkolnyAdmin Szeryf (86,360 p.)

Na przykład tak (sam blok nawigacyjny):

<nav>
        <ul>
            <li><a href="index.php">Index</a></li><li><a href="index.php?action=new_entry">New entry</a></li><li><a href="index.php?action=register">Register</a></li><li><a href="index.php?action=login">Login</a></li>
        </ul>
    </nav>

Bez białych znaków. Tu masz artykuł na podobny temat: https://miroslawzelent.pl/kurs-html/struktura-witryny-metoda-display-inline-block/

komentarz 29 lutego przez whiteman808 Obywatel (1,820 p.)
Dlaczego w linku pan Mirek radzi ustawić akurat wartość maginesów -4px?
komentarz 29 lutego przez SzkolnyAdmin Szeryf (86,360 p.)
Ponieważ taka jest domyślna szerokość odstępu, ściślej 0,22 ustalonego rozmiaru czcionki - zwykle to 16px, czyli odstęp ma w zaokrągleniu 4px.

Podobne pytania

0 głosów
2 odpowiedzi 141 wizyt
pytanie zadane 15 lutego 2017 w HTML i CSS przez Allen Obywatel (1,010 p.)
0 głosów
1 odpowiedź 220 wizyt
pytanie zadane 6 stycznia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
+1 głos
3 odpowiedzi 401 wizyt
pytanie zadane 9 października 2021 w HTML i CSS przez toko Mądrala (7,310 p.)

92,539 zapytań

141,381 odpowiedzi

319,463 komentarzy

61,926 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...