猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何在 <li> 元素之间放置一些空格？

https://img1.mukewang.com/6524f3980001107019161080.jpg

我想在“主页”、“关于”和其他按钮之间添加更多空间。至少约5px。


这是我的 HTML 和 CSS 代码：


.custom-padding{

    padding-top: 25px;

  }

  

nav {

    border-radius: 20px;

    background: #ededf1;

    box-shadow:  5px 5px 10px #8e8e91, 

                 -5px -5px 10px #ffffff;

    position: relative;

    width: calc(100% - 60px);

    margin: 0 auto;

    padding: 10px;

    z-index: 1;

    text-align: right;

    padding-right: 2%;

  }

  

  .menu-area li {

    display: inline-block;

    border-radius: 10px;

    background: #ededf1;

    box-shadow:  3px 3px 5px #8e8e91, 

                 -3px -3px 5px #ffffff;

  }

  

  .menu-area a { 

    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    font-weight: bold;

    text-decoration: none;

    color: #8c93a4;

    letter-spacing: 1px;

    text-transform: capitalize;

    display: block;

    padding: 0 30px;

    font-size: 15px;

    line-height: 30px;

    position: relative;

    z-index: 1;

  }

<html>

  <head>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="style.css">

    <title>

      some title

    </title>

  </head>

  <body >


    <div class="custom-padding">

      <nav>

        <div class="logo">Form</div>

  

        <ul class="menu-area">

          <li><a href="#">Home</a></li>

          <li><a href="#">About</a></li>

          <li><a href="#">Portfolio</a></li>

          <li><a href="#">Services</a></li>

        </ul>

      </nav>

    </div>

  </body>

</html>


繁星淼淼
浏览 138回答 4
4回答

千巷猫影

您应该添加：.menu-area&nbsp;li{margin:&nbsp;0&nbsp;5px";}如果按钮变大，只需减少链接的填充，例如：&nbsp;.menu-area&nbsp;li&nbsp;a{padding:&nbsp;0&nbsp;20px;}
0

尚方宝剑之说

您所需要的只是保证金。我不知道你为什么不这样做。&nbsp; .menu-area li {&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; &nbsp; background: #ededf1;&nbsp; &nbsp; &nbsp; box-shadow:&nbsp; 3px 3px 5px #8e8e91, -3px -3px 5px #ffffff;&nbsp; &nbsp; &nbsp; margin: 0px 5px;&nbsp; &nbsp; &nbsp; // right, left margin of five&nbsp; }让我们简单一点。使用&nbsp;..custom-padding{&nbsp; &nbsp; padding-top: 25px;&nbsp; }&nbsp;&nbsp;nav {&nbsp; &nbsp; border-radius: 20px;&nbsp; &nbsp; background: #ededf1;&nbsp; &nbsp; box-shadow:&nbsp; 5px 5px 10px #8e8e91,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-5px -5px 10px #ffffff;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: calc(100% - 60px);&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; text-align: right;&nbsp; &nbsp; padding-right: 2%;&nbsp; }&nbsp;&nbsp;&nbsp; .menu-area li {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; background: #ededf1;&nbsp; &nbsp; box-shadow:&nbsp; 3px 3px 5px #8e8e91,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-3px -3px 5px #ffffff;&nbsp; }&nbsp;&nbsp;&nbsp; .menu-area a {&nbsp;&nbsp; &nbsp; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #8c93a4;&nbsp; &nbsp; letter-spacing: 1px;&nbsp; &nbsp; text-transform: capitalize;&nbsp; &nbsp; display: block;&nbsp; &nbsp; padding: 0 30px;&nbsp; &nbsp; font-size: 15px;&nbsp; &nbsp; line-height: 30px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; z-index: 1;&nbsp; }<html>&nbsp; <head>&nbsp; &nbsp; <meta charset="utf-8" />&nbsp; &nbsp; <link rel="stylesheet" href="style.css">&nbsp; &nbsp; <title>&nbsp; &nbsp; &nbsp; some title&nbsp; &nbsp; </title>&nbsp; </head>&nbsp; <body >&nbsp; &nbsp; <div class="custom-padding">&nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; <div class="logo">Form</div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <ul class="menu-area">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Home</a></li>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">About</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Portfolio</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Services</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; </div>&nbsp; </body></html>Codepen：https:&nbsp;//codepen.io/marchmello/pen/BaNGyVo或使用margin..custom-padding{&nbsp; &nbsp; &nbsp; &nbsp; padding-top: 25px;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; nav {&nbsp; &nbsp; &nbsp; &nbsp; border-radius: 20px;&nbsp; &nbsp; &nbsp; &nbsp; background: #ededf1;&nbsp; &nbsp; &nbsp; &nbsp; box-shadow:&nbsp; 5px 5px 10px #8e8e91,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-5px -5px 10px #ffffff;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; width: calc(100% - 60px);&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; &nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; &nbsp; &nbsp; text-align: right;&nbsp; &nbsp; &nbsp; &nbsp; padding-right: 2%;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;.menu-area li {&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; &nbsp; background: #ededf1;&nbsp; &nbsp; &nbsp; box-shadow:&nbsp; 3px 3px 5px #8e8e91, -3px -3px 5px #ffffff;&nbsp; &nbsp; &nbsp; margin: 0px 5px;&nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; .menu-area a {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;&nbsp; &nbsp; &nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; color: #8c93a4;&nbsp; &nbsp; &nbsp; &nbsp; letter-spacing: 1px;&nbsp; &nbsp; &nbsp; &nbsp; text-transform: capitalize;&nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0 30px;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 15px;&nbsp; &nbsp; &nbsp; &nbsp; line-height: 30px;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; &nbsp; }<html>&nbsp; &nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset="utf-8" />&nbsp; &nbsp; &nbsp; &nbsp; <link rel="stylesheet" href="style.css">&nbsp; &nbsp; &nbsp; &nbsp; <title>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; some title&nbsp; &nbsp; &nbsp; &nbsp; </title>&nbsp; &nbsp; &nbsp; </head>&nbsp; &nbsp; &nbsp; <body >&nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-padding">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="logo">Form</div>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="menu-area">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">About</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Portfolio</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Services</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </body>&nbsp; &nbsp; </html>代码笔： https:&nbsp;//codepen.io/marchmello/pen/xxGQbJa
0

浮云间

这就是我修复它的方法：&nbsp; .menu-area li {&nbsp; &nbsp; margin-left: 5px;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; background: #ededf1;&nbsp; &nbsp; box-shadow:&nbsp; 3px 3px 5px #8e8e91,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-3px -3px 5px #ffffff;&nbsp; }
0

肥皂起泡泡

这会起作用<li&nbsp;style="padding-right:5px"></li>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5