强制div/textbox在同一行显示？

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>

- erbsoftware

---

输入标签已经是内联元素，你应该只在一行中看到两个文本框。 - HamidRaza

你正在使用其他CSS吗？它们目前仅在一行中：http://jsfiddle.net/Akzaa/ - evanwong

Answer 1

在你的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>

- adamdehaven

Answer 2

最简单的方法是对你想要显示为行内元素的元素设置 display: inline 或 display: inline-block 中的任意一个属性。

请先了解它们 实际的作用，以免出现意外情况。

- Martín Valdés de León

Answer 3

我认为你想要使用 display: inline-block，但是我在 jsfiddle 上运行了一下，它已经默认是 inline 的，没有额外的 CSS。你确定没有其他的 CSS 覆盖了它吗？

- dough

---

是的，有一个input[type="text"]，input[type="password"]覆盖了它，我从检查元素中进行了检查。现在已经修复了。 - erbsoftware