Question

我有两个我希望彼此相邻显示的字段集：

enter image description here

我已经设法让它达到我想要的正确距离，但却无法在那里排队。

以下是我使用的html。

<div style="width:900px; height:230px;">
  <fieldset style="width:150px;">
    <legend>Facilities Required</legend>
    <asp:CheckBox ID="PhysicalMailbox" runat="server" Text="Physical Mailbox" /><br>
    <asp:CheckBox ID="Uniform" runat="server" Text="Uniform"/><br>
    <asp:CheckBox ID="Desk" runat="server" Text="Desk"/><br>
    <asp:CheckBox ID="Stationary" runat="server" Text="Stationary"/>
  </fieldset>
  <div style="width:50%; top:0px">
    <fieldset style="width:229px; left:151px; float:right; top:0px;" >
      <legend>Access Required</legend>
      <asp:CheckBox ID="AccessTag" runat="server" Text="Access Tag" /><br><br>
      <asp:Label ID="lblProfile" enableviewstate="false" runat="server" AssociatedControlID="ddProfile" CssClass="FormLabel">Profile</asp:Label>
      <ICCM:ICCMDropDownList ID="ddProfile" runat="server" TabIndex="10" style="width:233px;" AppendDataBoundItems="true"  >   
        <Items>
          <asp:ListItem Value="" Text="" Selected="True" />    
        </Items>                                                                                                    
      </ICCM:ICCMDropDownList>
   </fieldset>
  </div>
</div>

提前致谢。

Answer 1

我知道你应该创建一个新的div，它将是其余两个DIV的容器。内部DIV上的应用样式“float：left”。请看下面的代码，这正如您所期望的那样：

    <div style="width:900px">
        <div style="width:50%; height:230px; float:left;">
          <fieldset style="width:150px;">
            <legend>Facilities Required</legend>
            <asp:CheckBox ID="PhysicalMailbox" runat="server" Text="Physical Mailbox" /><br>
            <asp:CheckBox ID="Uniform" runat="server" Text="Uniform"/><br>
            <asp:CheckBox ID="Desk" runat="server" Text="Desk"/><br>
            <asp:CheckBox ID="Stationary" runat="server" Text="Stationary"/>
          </fieldset>
          </div>
          <div style="width:50%; top:0px;float:left;">
            <fieldset style="width:229px; left:151px; float:right; top:0px;" >
              <legend>Access Required</legend>
              <asp:CheckBox ID="AccessTag" runat="server" Text="Access Tag" /><br><br>
              <asp:Label ID="lblProfile" enableviewstate="false" runat="server" AssociatedControlID="ddProfile" CssClass="FormLabel">Profile</asp:Label>
              <ICCM:ICCMDropDownList ID="ddProfile" runat="server" TabIndex="10" style="width:233px;" AppendDataBoundItems="true"  >   
                <Items>
                  <asp:ListItem Value="" Text="" Selected="True" />    
                </Items>                                                                                                    
              </ICCM:ICCMDropDownList>
           </fieldset>
        </div>
    </div>

Answer 2

将它们设置为：

  style="display:inline-block;"

纠正整个代码：

<div style="width:900px; height:230px;">
    <div style=" top:0px; display:inline-block;">
    <fieldset style="width:150px;">

    </fieldset>
    </div>
  <div style=" top:0px; display:inline-block;">
    <fieldset style="width:229px; left:151px; float:right; top:0px;" >

   </fieldset>
  </div>
</div>

Answer 3

您可以先将<fieldset>打包到<div/>并将其设为float:left

将float:left提供给<div>

第一个字段集

<div style="float:left;"> 
  <fieldset>...</fieldset>
</div>

注意：您忘记关闭主</div>，同时考虑divs一个float:left而另一个float:right从字段集中移除float。

Fiddle DEMO

另一种方式 正在使用display属性：

您可以将display:inline-block设置为包含divs的{{1}}，您可能需要考虑fieldset：）

Answer 4

Demo

像这样前往2 div's： -

<div style="width:150px; height:230px;">Fieldset 1</div>
<div style="width: auto; height:230px;">Fieldset 2</div>

Answer 5

使用display: inline-block;
DEMO

如何将两个div对齐？

5 个答案: