Question

一个元素不会移动到我想要的位置。我想在“注册”和浏览器之间留一些空白，但不知道该怎么做。我已经尝试过填充，但这似乎是一种错误的想法。

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  font-family: sans-serif;
  color: black;
}

.firstpart {
  background-color: #eee;
  height: 30vh;
}

.navbar li {
  list-style: none;
  display: inline;
}

.navbar-left {
  float: left;
  padding: 20px 20px 0 20px;
}

.navbar-right {
  float: right;
  padding: 20px 20px 0px 20px;
}

.badge {
  background-color: black;
  color: white;
  height: 35px;
  width: 80px;
}

<div class="firstpart">
  <div class="navbar">
    <ul>
      <li class="navbar-left">ABOUT</li>
      <li class="navbar-left">CONTACT</li>
      <li class="navbar-left">FAQS</li>
      <div class="navbar-right badge">
        <li>REGISTER</li>
      </div>
      <li class="navbar-right">SIGN IN</li>
      <li class="navbar-right">MANAGE BOOKING</li>
    </ul>
  </div>
</div>

Answer 1

您只需要添加：

.navbar {
  padding-right: 10px;
}

您还可以删除无序列表中的div，因为这不是有效的HTML。替换为：

<li class="navbar-right badge">REGISTER</li>

代码（在“整页”视图中打开，否则“管理预订”将自动换行）：

/* Add this */
.navbar {
  padding-right: 10px;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body{
    font-family: sans-serif;
    color: black;
}
.firstpart{
    background-color:#eee;
    height: 30vh;
}
.navbar li{
    list-style: none;
    display: inline;
}
.navbar-left{
    float: left;    
    padding: 20px 20px 0 20px;
}
.navbar-right{
    float: right;
    padding: 20px 20px 0px 20px;
}
.badge{
    background-color: black;
    color:white;
    height: 35px;
    width: 80px;

}

<body>
    <div class="firstpart">
    <div class="navbar">
        <ul>
            <li class="navbar-left">ABOUT</li>
            <li class="navbar-left">CONTACT</li>
            <li class="navbar-left">FAQS</li>
            <li class="navbar-right badge">REGISTER</li> <!-- Use an li element instead -->
            <li class="navbar-right">SIGN IN</li>
            <li class="navbar-right">MANAGE BOOKING</li>
        </ul>
    </div>
    </div>
</body>

Answer 2

我认为您可以简单地将.navbar div的宽度设置为98％

.navbar {
width:98%;
}

如何移动特定元素？

2 个答案: