0

我试图让第二个文本框与第一个文本框对面。对它在右下角。

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
   </head>
   <body>
      <div>
         <h2>Top</h2>
         <div>
            <h2>TextBox 1</h2>
            <div>
               <input type="text" />
            </div>
         </div>
         <div style="float:right;">
            <h2>textbox2</h2>
            <div>
               <input type="text" />
            </div>
         </div>
      </div>
   </body>
</html>
4

4 回答 4

1

把第一个浮起来就行了

<div style="float:left;">

小提琴

于 2013-07-26T16:26:46.813 回答
1

一种方法是添加float: left;到第一个容器 div，因为这会将其宽度缩小到其内容的宽度，从而允许两个输入并排显示。

http://jsfiddle.net/uwFyp/

于 2013-07-26T16:26:56.377 回答
0

您基本上只需要浮动包含 h2 和输入元素的两个 div。您可以同时向左浮动或将第一个向左浮动和第二个向右浮动（如上面代码中的示例所示）：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <body>
        <div>
            <h2>Top</h2>
            <div style="float:left;">
                <h2>TextBox 1</h2>
                <div>
                    <input type="text" />
                </div>
            </div>
            <div style="float:right;">
                <h2>textbox2</h2>
                <div>
                    <input type="text" />
                </div>
            </div>
        </div>
    </body>
</html>

浮动两个 div 的左侧会将第二个 div 定位在第一个 div 之后。

您可能还会发现需要<div style="clear:both;"></div>在第二个浮动 div 之后立即放置一个清除 div。这将防止这两个元素之后的元素立即定位在最后一个浮动元素之后。

于 2013-07-26T16:31:40.303 回答
0

用于对齐输入的浮动 div 因大量额外代码而变得棘手混乱 尝试这种可以通过 CSS 设置样式的更简洁的方法：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <style>
        .horz-inputs label, .horz-inputs input {display: inline-block;}
        /*add any css you want to the inputs and labels from this point forward
    </style>
    <body>
        <div class="horz-inputs">
            <h2>Top</h2>
            <label>TextBox 1</label>
            <input type="text" />
            <label>TextBox 2</label>
            <input type="text" />
        </div>
    </body>
</html>
于 2013-07-26T17:17:57.683 回答