css 如何在导航栏的左右两边添加更多的背景？

tv6aics1 于 2023-08-09 发布在其他

关注(0)|答案(1)|浏览(92)

我希望导航栏显示在页面的左右两端，但我希望文本留在页面的中心。
我也试过填充，但它没有工作。我试着把左边和右边的边框放大，但那也不管用。（你还需要什么Stack Overflow？）
HTML代码：

<div id="div1">
        <nav class="navbar">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">All Recipes</a></li>
                <li><a href="">Quick and easy</a></li>
                <li><a href="">Breakfast</a></li>
                <li><a href="">Lunch</a></li>
                <li><a href="">Dinner</a></li>
                <li><a href="">Desserts</a></li>
                <li><a href="" id="lo">Must try</a></li>
                <li><a href="">Healthy</a></li>
            </ul>
        </nav>
    </div>

字符串
CSS代码：

body{
    margin-left: 15%;
}
#div1{
    margin-left: -15%;
}
nav ul{
    list-style: none;
    background-color: rgb(255, 197, 6);
    padding: 5px 10px 5px 10px;
    margin: 0;
    border-top: 1px solid rgb(190, 188, 188);
    border-bottom: 1px solid rgb(190, 188, 188);
    margin-left: 18%;
    overflow: hidden;
    display: inline-block;
    margin-top: 2%;
}
nav a{
    text-decoration: none;
    display: inline-block;
    color: black;
    text-align: center;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
nav a:hover{
    background-color: rgb(254, 156, 0);
}
nav li{
    float: left;

型

css

来源：https://stackoverflow.com/questions/76829667/how-to-add-more-background-on-the-left-and-the-right-of-the-navbar

1条答案

按热度按时间

2nbm6dog1#

这是一个导航栏，填充屏幕和指定的高度，它的中心文本以及，它只是一个例子，你应该看起来像什么。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        * {
          margin:0;
          padding:0;
        }
    
        .navbar {
          width:100%;
          height:100%;
          box-shadow:2px 2px 12px 2px #efefef;
        }
    
        .navbar ul {
          display:flex;
          align-items:center;
          justify-content:center;
          border-bottom:1px solid #efefef;
        }
    
        .navbar ul li {
          list-style-type:none;
          margin:20px;
        }
      </style>
    </head>
    <body>
      <div class="navbar">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>Help</li>
          <li>Recipes</li>
        </ul>
      </div>
    </body>
    </html>

字符串

赞(0）回复(0）举报 2023-08-09

我来回答

css 如何在导航栏的左右两边添加更多的背景？

1条答案

相关问题

热门标签

最新问答