javascript - 强制 div/文本框在一行中显示？

Question

如何强制以下内容显示在一行中？（目前两个文本框都显示在彼此下方）

            <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>

Answer 1

如图所示添加display:inline-block到您的 CSS 中：

<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>

Answer 2

最简单的方法是设置display: inline或设置display: inline-block要内联显示的元素。

请仔细阅读他们的实际工作，这样您就不会遇到任何意外。

Answer 3

我想你想要display: inline-block，但我运行了一个jsfiddle，它已经是内联的，没有额外的 css。您确定在其他地方没有其他 css 可以覆盖它吗？