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

【问题标题】：How to remove extra to the right of the input button?如何删除输入按钮右侧的额外内容？
【发布时间】：2017-06-29 15:22:22
【问题描述】：

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

我添加了一个 jsfiddle

https://jsfiddle.net/jb7j6ysz/

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

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

【问题讨论】：

你的搜索栏超出标题你能详细说明你想要什么吗？
在您的输入中添加 width:70% 或根据您的需要添加任何数字
为目录或搜索设置宽度

标签： html css psd

【解决方案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;
}

我为新小提琴使用了浮点数，并在ul 中添加了填充 0。还调整了.search上的填充

【讨论】：

谢谢。最佳答案！

【解决方案2】：

索引 div 挡住了路。用这个更新你的CSS

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

【讨论】：

【解决方案3】：

由于您的 Ul 项目，额外的空间即将到来。在你的css中添加这个

 ul{
  padding-left:0px;
  }

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：