Question

所以，在我的标题中，我有一个水平的链接列表。在他们旁边，我想要一个搜索栏，但是当我将它插入到我的链接旁边时，它们现在都出现在我的身体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元素前面的正文。它不允许文本元素下面的任何填充/边距。但同样，如果页面伸展（宽度增加），文本输入将重新呈现与其余部分内联。

请参阅Fiddle Update

输入标记消息对齐

1 个答案: