如何更改导航元素的填充？

Question

我几乎是 HTML/CSS 的新手。我已经创建了一个导航，但是导航在它的开头有这个白色的 space，在“桌面”旁边，并且在它的末尾没有 space（在“移动”旁边），任何我可以改变它的大小吗？我希望你明白我的意思

li  {
    display: inline;
    
}

li a {
    text-decoration: none;
    color: gray;
    padding-left: 15px;
    border-radius: 5px solid black;
}

.Desktop {
   background: gray; 
   color: white;
   padding: 15px;
   
}

.navigation {
    background: white;
    padding: 5px;
}

.text {
    margin-left: 85px;
    border: 2px solid black;
    display: inline-block;
}

body {
    background: gray;
}

<!DOCTYPE html>
<html>
    <head>
        <title>KONECNE</title>
        <link rel="stylesheet" href="CSS/styles.css">
        <link rel="stylesheet" href="CSS/normalize.css">
    </head>
<body>
    <header id="header" class="hlavicka">
        <nav id="nav" class="navigacka">
            <div class="navigation">
                <div class="text">
                    <ul class="navigationwrap">
                        <li><a href=# class="Desktop">Desktop</a></li>
                        <li><a href=# class="Tablet">Tablet</a></li>
                        <li><a href=# class="TabletP">Tablet(Potrait)</a></li>
                        <li><a href=# class="Mobile">Mobile</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <section id="header" class="wrapper">
        <nav class="podnavigacka">

        </nav>
    </section>

    <section class="hlavnytext">

    </section>

</body>
</html>

提前致谢

Answer 1

li  {
    display: inline;
    
}

li a {
    text-decoration: none;
    color: gray;
    padding-left: 15px;
    border-radius: 5px solid black;
}

.Desktop {
   background: gray; 
   color: white;
   padding: 15px;
   
}

.navigation {
    background: white;
    padding: 5px;
}

.text {
    margin-left: 85px;
    border: 2px solid black;
    display: inline-block;
}

.Mobile{
    padding: 20px;
}

body {
    background: gray;
}

<!DOCTYPE html>
<html>
    <head>
        <title>KONECNE</title>
        <link rel="stylesheet" href="CSS/styles.css">
        <link rel="stylesheet" href="CSS/normalize.css">
    </head>
<body>
    <header id="header" class="hlavicka">
        <nav id="nav" class="navigacka">
            <div class="navigation">
                <div class="text">
                    <ul class="navigationwrap">
                        <li><a href=# class="Desktop">Desktop</a></li>
                        <li><a href=# class="Tablet">Tablet</a></li>
                        <li><a href=# class="TabletP">Tablet(Potrait)</a></li>
                        <li><a href=# class="Mobile">Mobile</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <section id="header" class="wrapper">
        <nav class="podnavigacka">

        </nav>
    </section>

    <section class="hlavnytext">

    </section>

</body>
</html>

Answer 2

您的问题是标签 ul 默认具有规则 padding-inline-start: 40px。这条规则需要被推翻。将此添加到您的 css，您的问题将得到解决：

.navigationwrap {
  padding-inline-start: 0;
}

然后 padding: 15px li a:

li a {
    text-decoration: none;
    color: gray;
    padding: 15px;
    border-radius: 5px solid black;
}

此外，从 .Desktop 中删除 padding: 15px：

.Desktop {
   background: gray; 
   color: white; 
}

如果您有任何问题，请告诉我。

li  {
    display: inline;
    
}

li a {
    text-decoration: none;
    color: gray;
    padding: 15px;
    border-radius: 5px solid black;
}

.Desktop {
   background: gray; 
   color: white;
}

.navigation {
    background: white;
    padding: 5px;
}

.text {
    margin-left: 85px;
    border: 2px solid black;
    display: inline-block;
}

body {
    background: gray;
}

.navigationwrap {
  padding-inline-start: 0;
}

<!DOCTYPE html>
<html>
    <head>
        <title>KONECNE</title>
        <link rel="stylesheet" href="CSS/styles.css">
        <link rel="stylesheet" href="CSS/normalize.css">
    </head>
<body>
    <header id="header" class="hlavicka">
        <nav id="nav" class="navigacka">
            <div class="navigation">
                <div class="text">
                    <ul class="navigationwrap">
                        <li><a href=# class="Desktop">Desktop</a></li>
                        <li><a href=# class="Tablet">Tablet</a></li>
                        <li><a href=# class="TabletP">Tablet(Potrait)</a></li>
                        <li><a href=# class="Mobile">Mobile</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <section id="header" class="wrapper">
        <nav class="podnavigacka">

        </nav>
    </section>

    <section class="hlavnytext">

    </section>

</body>
</html>

如何更改导航元素的填充？

How do I change a padding of a navigation element?

html

css

padding