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设置为您想要内联显示的元素。

请阅读他们actually do的内容，这样您就不会遇到任何意外。

Answer 3

我认为你想要display: inline-block但是我跑了jsfiddle并且它已经内联而没有额外的CSS。你确定在其他地方没有其他css超越它吗？</ p>

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

3 个答案: