0

私は実際に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;
}
4

2 に答える 2

0

.menu li input.menu内の特定の入力をターゲットにする場合は、次のようにターゲットにすることができます。

.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/ 。

于 2013-03-25T23:19:39.003 に答える
0

これはあなたが探しているものですか？

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;
}
于 2013-03-25T23:21:16.040 に答える