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类的填充并给出一个新的甚至是一个边距，以正确定位我的文本框吗？

或者我应该只在<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内的属性（例如填充/边距）更改为适合您的属性，而不会影响其他元素。

jsFiddle here - 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;
}

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

2 个答案: