4

以下を強制的に 1 行で表示するにはどうすればよいですか? (現時点では、両方のテキスト ボックスが互いの下に表示されています)

            <form>
               <div class="loginDiv">
               Username : <input type="text" class="resizedTextbox" name="username">
               Password : <input type="text" class="resizedTextbox" name="password">
               </div>
           </form>

     <style type="text/css">
        .resizedTextbox {width: 50px; height: 25px}
        .loginDiv{font-size: 12px;}
    </style>
4

3 に答える 3

4

次のように CSSに追加display:inline-blockします。

<style type="text/css">
    .resizedTextbox {
      width: 50px;
      height: 25px;
      display:inline-block;
    }
    .loginDiv {
      font-size: 12px;
    }
</style>

    <form>
       <div class="loginDiv">
          Username : <input type="text" class="resizedTextbox" name="username">
          Password : <input type="text" class="resizedTextbox" name="password">
        </div>
    </form>
于 2013-01-16T21:47:37.750 に答える
2

最も簡単な方法は、インラインで表示する要素にdisplay: inlineまたはを設定することです。display: inline-block

彼らが実際に何をしているのかを読んで、驚きに遭遇しないようにしてください.

于 2013-01-16T21:47:57.453 に答える
0

必要だと思いますが、 jsfiddledisplay: inline-blockを実行したところ、余分な css なしで既にインライン化されていました。それをオーバーライドしている他のCSSがどこにもないのですか？

于 2013-01-16T21:49:48.997 に答える