html - 输入标签搞乱对齐

Question

因此，在我的标题中，我有一个水平链接列表。在它们旁边，我想要一个搜索栏，但是当我将它插入到我的链接旁边时，它们现在都出现在我的 body div 后面。

HTML:

<ul id="unordered">
  <li><a href="#">LInk1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><input type="text"></li>
</ul>

CSS:

#unordered {
display:inline-block;
height:0px;
padding-bottom:5px;
margin-left:400px;
}
#unordered li a{
text-align:center;
color:white;
text-decoration:none;
font-size:18px;
list-style-type:none;
}
#unordered li {
list-style-type:none;
display:inline;
padding-left: 0px;
padding-right: 55px;
padding-bottom: 15px;
}
#unordered li link {
list-style-type:none;
margin-bottom: 10px;
}

这是之前和之后的屏幕截图......

之前:http://prntscr.com/2jfi8i 之后:http://prntscr.com/2jfhxz

谢谢。

编辑:我注意到我忘记了表单标签。插入它们后，它不再隐藏在 body div 后面，而是链接现在位于文本框上方。

Answer 1

所以我认为发生的事情是你的 #unordered 不够宽，你给它的位置。文本字段向下移动。以下修复它

#unordered {
display:inline-block;
height:0px;
padding-bottom:5px;
margin-left:100px; /*It's 100px instead of 400px, the ul is wider*/
}

还有其他方法可以解决，以上只是一种方法。

更新 我删除了表单标签，除非你真的想要那些？ (它们不在原始代码中)然后我删除了 height:0px ，这解决了主体出现在 ul 元素前面的问题。它不允许在文本元素下方有任何填充/边距。不过，如果页面拉伸(stretch)(宽度增加)，文本输入会重新呈现与其余部分内联。

请参阅Fiddle Update