如何删除输入按钮右侧的多余内容？

Question

好的，我正在重新创建我在网上找到的 PSD 以供练习。在 header 中有一个搜索栏和按钮。按钮右侧有额外的内容占用 space，我无法删除它。

我添加了一个jsfiddle

请确保预览尽可能向左展开

<!DOCTYPE html>
<html>
  <head>
    <title>Education Compaony</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="branding">
        <h2>Education Department</h2>
        <h5>A free PSD template</h5>
      </div> <!-- /.Branding -->
    <div class="directory">
      <div class="search">
        <input type="text">
        <input type="submit" value="Search">
      </div> <!-- /.Search -->
      <div class="index">
        <ul>
          <li>A - Z index | </li>
          <li>Studenet Login | </li>
          <li>Staff Login </li>
        </ul>
      </div> <!-- /.Index -->
    </div> <!-- /.Directory -->
  </div> <!-- /.Header -->
  </body>
</html>

/* Font Import */
@import url('https://fonts.googleapis.com/css?family=Lora');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.header{
  height: 95px;;
  background-color: #FCD05D;
  color: #3A302E;
  font-family: 'Lora', sans-serif;
}

.branding {
  float: left;
  margin-left: 200px;
}

.branding h2 {
  margin-top: 10px;
  text-transform: uppercase;
  font-size: 28px;
}

.branding h5 {
  margin-top: -20px;
  font-size: 16px;
}

.directory {
  float: right;
  margin-right: 200px;
}

.search {
  background-color: black;
  border: 5px solid black;
  border-radius: 8px;
  padding: 1px 0px 5px 12px;
}

.search input[type=text] {
  background-color: #FCD05D;
  border-radius: 3px;
}

.search input[type=submit] {
  background-color: #595657;
  color: #FCD05D;
  border: 2px solid #595657;
  border-radius: 3px;
}

.index ul {
  list-style-type: none;
  text-decoration: none;
  margin-top: -0;
}

.index li {
  margin-top: -20px;
  font-size: 14px;
  display: inline-flex;
  word-spacing: 1px;
}

Answer 1

额外的 space 来自您的链接所在的 ul。由于宽度是自动的，列表部分的宽度大于搜索部分的宽度，因此搜索部分采用该宽度。

您可以将 padding: 0 设置为 ul 列表以减少一些 space。它在左边有一个自然的填充。由于列表的长度，这仍然会在右侧留下一些 space。您可以为搜索区域设置宽度以防止列表换行。或者您可以使搜索部分向左浮动，但您需要调整填充以使其看起来对称

这是一个例子

https://jsfiddle.net/jb7j6ysz/3/

.search {
  background-color: black;
  border: 5px solid black;
  border-radius: 8px;
  padding: 1px 12px 5px 12px;
  float: left;
}
.index ul {
  list-style-type: none;
  text-decoration: none;
  margin-top: 0;
  padding: 0;
}

我为新 fiddle 使用了浮点数，并向 ul 添加了填充 0。还调整了 .search

上的填充

Answer 2

索引div挡路了。用这个

更新你的css

.index{
  position: absolute;
  display:block;
  left: 40%;
}

Answer 3

额外的 space 是因为你的 Ul 物品。将此添加到您的 css

 ul{
  padding-left:0px;
  }

Answer 4

我认为您的问题与 .index div 的宽度有关。它和您的搜索栏都包含在同一个 .directory div 中。因为它们都是块级元素，其宽度设置为默认值 auto，它们采用其父元素的宽度，在本例中由最大的子元素设置，即 .index div.

通过将搜索栏设置为 display: inline-block;，它只会占用所需的宽度。

.search {
  ...
  display: inline-block;
}

此外，用于 .index div 的 ul 默认为 padding-left，您可能需要另外设置。

如何删除输入按钮右侧的多余内容？

How to remove extra to the right of the input button?

html

css

psd