Question

我有三个表单元素，我想彼此相邻。

form.left
{
    width:200px;
    height:450px;
    background-color:#000000;
    padding:10px 40px; 
}

form.right
{
    width:200px;
    height:450px;
    background-color:#000000;
    padding:10px 40px; 
}

form.center
{
    width:200px;
    height:450px;
    background-color:#000000;
    padding:10px 40px; 
}

是否可以将它们水平放置在彼此旁边，是否应该使用哪种定位？元素应该是容器边界上方的20px（填充）。

这是我的容器的代码，其中表单应该适合：

#container
{
    width:1010px;
    margin:0 auto;
    background:#999999;
    border-radius:14px;
    padding:20px;
    border:3px #43b2e6;
    border-style:groove;
}

Answer 1

你可以通过两种方式做到这一点：

第一路

<body> 
 <div id="header"> 
   <h1>Header</h1> 
 </div> 
 <div id="left"> 
  Port side text... 
 </div> 
 <div id="right"> 
   Starboard side text... 
 </div> 
 <div id="middle"> 
  Middle column text... 
 </div> 
 <div id="footer"> 
 Footer text... 
 </div> 
</body>

这是 CSS 代码：

body { margin: 0px; padding: 0px; } 
div#header { clear: both; height: 50px; background-color: aqua; padding: 1px; }
div#left { float: left; width: 150px; background-color: red; } 
div#right { float: right; width: 150px; background-color: green; } 
div#middle { padding: 0px 160px 5px 160px; margin: 0px; background-color: silver;}
div#footer { clear: both; background-color: yellow; }

第二路

<div id="container">
 <div class="leftside" style="float: left;">Left Stuff</div>
 <div class="middleside" style="float: left;">Middle Stuff</div>
 <div class="rightside" style="float: left;">Right Stuff</div>
 <br style="clear: left;" />
</div>

使用下面的css：

    .leftside
    {
    width:200px;
    height:450px;
    background-color:#000000;
    padding:10px 40px; 
    }

   .middleside
    {
    width:200px;
    height:450px;
    background-color:#000000;
    padding:10px 40px; 
    }

    .rightside
    {
    width:200px;
    height:450px;
    background-color:#000000;
    padding:10px 40px; 
    }

    #container
    {
    width:1010px;
    margin:0 auto;
    background:#999999;
    border-radius:14px;
    padding:20px;
    border:3px #43b2e6;
    border-style:groove;
    }

Answer 2

如果您只有3个表单字段并排尝试并排对齐，请使用以下代码：

<table style="font-family: Calibri; font-size: small">
    <tr height="15" style="height:11.25pt">
        <td height="15" style="height:11.25pt;width:42pt" width="56" class="style3">
            Label 1</td>
        <td style="width:42pt" width="56">
            <input id="Text1" type="text" class="style2" /></td>
        <td style="width:42pt" width="56" class="style3">
            Label 2</td>
        <td style="width:42pt" width="56">
            <input id="Text2" type="text" class="style2" /></td>
        <td style="width:42pt" width="56" class="style3">
            Label 3</td>
        <td style="width:42pt" width="56">
            <input id="Text3" type="text" class="style2" /></td>
    </tr>
</table>

表单元素的定位

2 个答案: