html - HTML -タグは改行を追加します

Question

わかりましたので、私はこれを<li>右に浮かせています...次のように:

そしてここにあります：

<div id="right_menu">
<ul>
<li class="search-li"><input placeholder="Search things here..." type="text" class="search-tr" /></li>
</ul>
</div>

CSSは次のとおりです。

#right_menu {
    float:right;
    background: #575757;
}
#right_menu ul li a {
    border-left:1px solid #fff;
    border-right:0px !important;
}

search-liクラスとsearch-trスタイルがありません。検索メニューはラップされて#first_menuおり、その CSS は次のとおりです。

#first_menu {
    background: #333 !important;
    width:100%;
    border-top:1px solid #fff;
}
#first_menu ul{
    margin: 0;
    padding: 0;
    background: #333;
    float: left;
    }

とにかく、ボックス内の<form action="search.php" method="get"> ... </form>周りに追加すると...これが得られます：<input><li>

これを修正するにはどうすればよいですか?

ありがとう

編集：考え直して、フォームを追加してEnterキーを押しても機能するかどうかさえわかりません...

Answer 1

FORM はブロック要素であるため、改行を追加します。そうならないように、フォームの CSS をリセットします。

使用する：

form {
   display:inline;
   margin:0;
   padding:0;
}

使用!importantは、CSS の特異性がどのように機能するかを知っている兆候です。これを読むのは良いことです。

また、このフォーム レイアウトの問題を完全に防ぐことができるCSS resetから始めることをお勧めします。