html - 清除填充之间标签

Question

我实际上有一个带有 3 个链接和 1 个搜索栏的菜单。

代码如下所示：

<ul class="menu">
    <li><a href="#">Menu1</a></li>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu3</a></li>
    <li><input type="text" name="search" id="search"/><a href="#">Search</a></li>
</ul>

基本上我已经给 .menu 类赋予了一种样式，对于我用作最后一项的文本框来说，它的填充有点多。

有什么我可以清除 -.menu 类的 Padding 并给出一个新的甚至一个边距，以正确定位我的文本框？

或者我应该只在<li>???中创建文本框

编辑：这是我正在使用的 css：

.menu{
padding: 13px 0 13px 0;
display: inline;
}

Answer 1

如果您想在 .menu 中定位特定输入，您可以使用 target .menu li input，如下所示：

.menu{
padding: 13px 0 13px 0;
display: inline;
}

.menu li input{
padding: 2px 0 2px 0;
display: inline;
}

您可以将内部的属性（例如填充/边距）更改为.menu li input适合您的任何内容，而不会影响其他元素。

jsFiddle在这里-http : //jsfiddle.net/st5ZA/1/。

Answer 2

这是你想要的？

HTML

<ul class="menu">
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><input type="text" name="search" id="search"/><a href=""></a></li>

CSS

.menu li input{
padding: 2em;
margin: 2em;
}