Question

我正在尝试在下面的屏幕截图中设计布局

Left and right alignment inside div

我试图在小提琴中实现相同的内容

<div  id="CorpDealerSearch" >
  <div class="left"> DealerName </div>
  <div class="left"> Region </div>
  <div class="left"> DealerCode </div>
  <div class="left"> Area </div>
  <div class="left">
    <input type="text"/>
  </div>
  <div class="left">
    <input type="text"/>
  </div>
  <div class="left">
    <input type="text"/>
  </div>
  <div class="left">
    <input type="text"/>
  </div>
</div>

请帮助建议正确的CSS以获得设计

Answer 1

看看这个FIDDLE

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>DealerName
            <input type='text' />DealerCode
            <input type='text' />
        </div>
        <div class='cell'>Region
            <input type='text' />Area
            <input type='text' />
        </div>
    </div>
</div>

CSS

body{
    width:100%;
    padding:0;
    margin:0;
    box-sizing:border-box;
}
.table {
    display:table;
    width:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;

    padding-right:20px;
}
input {
    display:block;
    width:100%;
}

Answer 2

尝试其他方法：

http://jsfiddle.net/Ta6Qk/

HTML

<div class="main">
    <div>
        <label>Data</label>
        <input type="text" value="">
    </div>

    <div>
        <label>Data</label>
        <input type="text" value="">
    </div>

            <div>
        <label>Data</label>
        <input type="text" value="">
    </div>

    <div>
        <label>Data</label>
        <input type="text" value="">
    </div>
</div>

和CSS

.main {
    width: 400px;
    position: relative;
}

.main div {
    border: none;
    display: inline-block;
    width: 44%;
    margin-right: 3%;    
}

input {
    width: 100%;
}

label {
    display:block
}

Answer 3

您必须在同一div中包含标签和输入： http://jsfiddle.net/NNLct/5/

不要忘记您也可以使用label tags将文本与相关输入相关联。

 <div id="CorpDealerSearch" >

    <div class="left">
    DealerName <input type="text"/>
    </div>

    <div class="left">
    Region <input type="text"/>
    </div>

    <div class="left">
    DealerCode <input type="text"/>
    </div>

    <div class="left">
    Area <input type="text"/>
    </div>

</div>

CSS：

.left 
{
float:left;
}

Answer 4

按照现有标记，这里是：DEMO

Float元素和每2个元素之后，clear float s，就这么简单！：）

<强> CSS

.left {
    float:left
}
.clr{clear:both}

<强> HTML

<div id="CorpDealerSearch">
    <div class="left">DealerName
        <br />
        <input type="text" />
    </div>
    <div class="left">Region
        <br />
        <input type="text" />
    </div>
    <div class="clr"></div>

    <div class="left">DealerCode
        <br />
        <input type="text" />
    </div>
   <div class="left">DealerCode
        <br />
        <input type="text" />
    </div>

</div>

Answer 5

看到这个小提琴：

http://jsfiddle.net/NNLct/16/

使用display:table; display:table-row; display:cell;

Answer 6

首先我要将html更改为：

<强> HTML

<div  id="CorpDealerSearch" >
<div>
<label for="dealerName">DealerName</label>
<input type="text" id="dealerName" name="dealerName">       
<label for="Region">Region</label>
<input type="text" id="Region" name="Region">
</div>  
<div>
<label for="DealerCode">DealerCode</label>
<input type="text" id="DealerCode" name="DealerCode">       
<label for="Area">Area</label>
<input type="text" id="Area" name="Area">
</div>
</div>

而css将是：

<强> CSS

#CorpDealerSearch label, input{
 float:left;
 clear:both;
}
#CorpDealerSearch div{
 display:block;
 float:left;
 width:200px;    
}

希望这会有所帮助。

Answer 7

这是小提琴：Check this

以下是HTML代码：

<div id="container">
    <div id="left" class="left">
        <div id="top-left" class="innerdiv">
            <div id="lbl-tl">
                Dealer Name:
            </div>
            <div id="txt-tl">
                <input type="text" style="width: 90%;" />
            </div>
        </div>
        <div id="bottom-left" class="innerdiv">
            <div id="lbl-bl">
                Dealer Code:
            </div>
            <div id="txt-bl">
                <input type="text" style="width: 90%;" />
            </div>
        </div>
    </div>
    <div id="right" class="right" >
        <div id="top-right" class="innerdiv">
            <div id="lbl-tr">
                Region:
            </div>
            <div id="txt-tr">
                <input type="text" style="width: 90%;" />
            </div>
        </div>
        <div id="bottom-right" class="innerdiv">
            <div id="lbl-br">
                Area:
            </div>
            <div id="txt-br">
                <input type="text" style="width: 90%;" />
            </div>
        </div>
    </div>
</div>

这是CSS：

    *
    {
        margin: 0px;
        padding: 0px;
    }
    #container
    {
        width: 700px;
        min-height: 150px;
    }

    .left
    {
        width: 49%;
        min-height: 150px;
        float: left;
    }

    .right
    {
        min-height: 150px;
        width: 49%;
        float: right;
    }

    .innerdiv
    {
        height: 75px;
    }

div内部左右对齐

7 个答案: