Выравнивание слева и справа внутри div

Question

Выравнивание слева и справа внутри div

0

Я пытаюсь создать макет в приведенном ниже скриншоте

Я пытался реализовать то же самое в скрипке

<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, чтобы получить дизайн

SivaRajini 16 дек. 2013, в 12:39

Источник

0

это для мобильных устройств, HTML5?
Grumpy 16 дек. 2013, в 11:36

Теги:

html

css

7 ответов

Ещё вопросы

SW4 · Answer 1 · 2013-12-16T09-29-00.000Z

Посмотрите на этот 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%;
}

Lukas · Answer 2 · 2013-12-16T08-47-00.000Z

Попробуйте что-нибудь еще:

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
}

Arawn · Answer 3 · 2013-12-16T10-44-00.000Z

Здесь скрипка: проверьте это

Вот код 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;
    }

Albz · Answer 4 · 2013-12-16T10-17-00.000Z

Вы должны включить ярлык и ввод в тот же div: http://jsfiddle.net/NNLct/5/

Не забывайте, что вы также можете использовать метки меток, чтобы связать текст с соответствующим вводом.

 <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;
}

NoobEditor · Answer 5 · 2013-12-16T10-05-00.000Z

Следуя существующей разметке, выполните следующие действия: 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>

Zword · Answer 6 · 2013-12-16T09-18-00.000Z

Смотрите эту скрипку:

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

Использование display:table; display:table-row; display:cell;

AmoDK · Answer 7 · 2013-12-16T09-04-00.000Z

Сначала я бы изменил 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;    
}

надеюсь, это поможет.