Question

好的我正在重新创建一个我在网上找到练习的PSD。在标题中有一个搜索栏和按钮。在按钮右侧有额外的内容占用空间，这是我无法摆脱的。

我添加了一个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

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

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

这是一个例子

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;
}

我使用float作为新小提琴，并在ul添加了填充0。还调整了.search

上的填充

Answer 2

索引div阻碍了。用这个

更新你的CSS

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

Answer 3

由于您的UI物品，额外的空间即将到来。在你的css中添加这个

 ul{
  padding-left:0px;
  }

Answer 4

我认为你的问题与.index div的宽度有关。它和您的搜索栏都包含在同一个.directory div中。因为两者都是块级元素，其宽度设置为默认auto，所以它们采用其父级的宽度，在这种情况下，父级的宽度由.index div设置。

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

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

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

如何删除输入按钮右侧的额外内容？

4 个答案: