html - 清除 <li> 标签之间的填充

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 中的特定输入，你可以定位 .menu li input，如下所示:

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

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

您可以将 .menu li input 中的属性(例如 padding/margins)更改为适合您的任何内容，而不会影响其他元素。

jsFiddle here - http://jsfiddle.net/st5ZA/1/ .