Html CSS将输入（文本框）彼此交叉放置_Html_Css

Html CSS将输入（文本框）彼此交叉放置

html css

Html CSS将输入（文本框）彼此交叉放置,html,css,Html,Css,我正试图让第二个文本框与第一个文本框相对。右边它在右下角 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <div> <h2>Top</h2>

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

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


无标题文件
顶部
文本框1
文本框2

只需将第一个向左浮动

<div style="float:left;">

一种方法是添加

浮点：左

到第一个容器div，因为这会将其宽度缩小到其内容的宽度，从而允许两个输入并排显示

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


无标题文件
顶部
文本框1
文本框2

将两个div向左浮动将使第二个div位于第一个div之后的右侧

您可能还会发现，您需要在第二个浮动div之后立即放置一个清除div。这将防止紧跟这两个浮动div之后的元素被放置在最后一个浮动元素之后。

用于对齐输入的浮动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>


无标题文件
.horz输入标签.horz输入{显示：内联块；}
/*从这一点开始，向输入和标签添加任何css
顶部
文本框1
文本框2

别忘了添加一个“clearfix”类并将其应用于包装父div，这样样式将按预期应用。clearfix:在{content:：；/*之前的浏览器不支持空内容*/可见性：隐藏；显示：块；高度：0；清除：两者；}

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