html - これらの幅 50% のフォーム要素が 1 行に表示されないのはなぜですか?

Question

2 つのフォーム要素 (テキスト入力と送信ボタン) があり、どちらも 50% の幅で 1 行に表示したいと考えています。これは、次の HTML/CSS では機能しません。

HTML

  <form name="newsletter" target="#" method="post" class="group">
    <input name="email" type="text" placeholder="email here..." />
    <input name="submit" type="submit" class="button" value="subscribe" />
  </form>

CSS

* {
    box-sizing:border-box;
}

input[type="text"] {
    margin: 0;
    width: 50%;
    font-size: 0.75rem; /* 16x0.75=12px */
    padding: 0.625em;
    border: 1px solid black;
    border-radius: 0.3125em 0.3125em 0.3125em 0.3125em;
}

input[type="submit"] {
    margin: 0;
    width: 50%;
    font-size: 0.75rem; /* 16x0.75=12px */
    padding: 0.625em;
    border: none;
    border-radius: 0.3125em 0.3125em 0.3125em 0.3125em;
    text-transform: uppercase;
}

それらをdisplay:blockorに設定してinline-blockも役に立ちません。しかし、両方をwidth:50%,に設定するfloat:leftとfloat:right、問題なく 1 行に表示されます。

何故ですか？

Answer 1

このスタイルを試してください:

input{float:left}