好的，我正在重新创建我在网上找到的 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;
}
最佳答案
额外的空间来自链接所在的 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 用于新的 fiddle，并将 padding 0 添加到 ul。还调整了 .search
关于html - 如何删除输入按钮右侧的多余内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44829204/