2

以下の HTML は、テキスト入力と送信ボタンを定義します。隙間なく隣り合ってほしいです。私のコードがこのように見えるとき、すべての入力要素でマージンを 0 に設定しているにもかかわらず、そこに奇妙なギャップがあります

    <form action="http://google.com/search" method="get" class="search">
      <input type="text" name="q">
      <input type="submit" value="Search">
    </form>

ただし、2 つの入力の間の HTML に改行がない場合

    <form action="http://google.com/search" method="get" class="search">
      <input type="text" name="q"><input type="submit" value="Search">
    </form>

謎のギャップがなくなり、ページは私がそうあるべきだと思うように見えます! 私の HTML と CSS はどちらも 100% 有効です。

CSSでこれを修正する方法はありますか？HTML のどこで改行が行われるかは保証できません。

前もって感謝します！

4

5 に答える 5

0

これは非常によく知られた問題であり、技術的には「バグ」ではありません。HTML 内のスペースは単語間のスペースとして解釈され、空白文字として表示されます。

示唆されているように、フローティングは問題を解決する可能性が最も高いですが、要素のスペースを取り除くために時々使用する別のハックがあります。つまり、コンテナー を 0 に設定し、必要に応じて子要素のプロパティをリセットします。 .inline-blockfont-size

あなたの場合、このルールはあなたの問題を消すのに十分なはずです:

form.search {
    font-size: 0
}

Example

于 2013-08-25T19:57:21.643 に答える