2013-12-06 4 views
0

Мой образец UI выглядит, как показано ниже:CSS - Добавить пустую строку между Div элементов

enter image description here

Здесь мне нужно добавить пустые строки после текстовых полей. Это означает, что после первого текстового поля появится пустая строка и еще одна пустая строка после второго текстового поля. Ниже, как мой cshtml файл выглядит следующим образом:

<style> 
    .divTable { 
     display: table; 
     border: none; 
    } 

    .divRow { 
     display: table-row; 
     width: 100%; 
    } 

    .divTable input, .divTable select { 
     padding: 2px; 
     border: solid 1px #BCC3C8; 
     height: 100%; 
     width: 100%; 
    } 

    .divTable button { 
     margin-top: -5px; 
     margin-left: 8px; 
     width: 100px; 
    } 
</style> 

<div class="divTable"> 
    <div class="divRow"> 
     <div class="divCell1">@Html.LabelFor(model => model.FirstName)</div> 
     <div class="divCell2">@Html.EditorFor(model => model.FirstName)</div> 
    </div> 
    <div class="divRow"> 
     <div class="divCell1">@Html.LabelFor(model => model.LastName)</div> 
     <div class="divCell2">@Html.EditorFor(model => model.LastName)</div> 
    </div> 
    <div class="input"> 
     <input type="submit" value="Submit"> 
    </div> 
</div> 

Но я не получаю желаемый выход. Результат такой же, как на приведенном выше снимке экрана. Как это сделать? Любая помощь приветствуется.

+0

Положите padding на 'divRow'? – CodingIntrigue

+3

Ваша репутация поддельная, я полагаю. –

ответ

0

Добавить маржу ниже divCell2:

.divRow .divCell2 { 
    margin-bottom: 20px; 
} 
0

Добавить ниже. Вам нужно добавить margin-bottom, чтобы добавить интервал в соответствии с вашими требованиями.

Например,

.divTable input, .divTable select{margin-bottom:30px;} 

PS: 30px является иллюстративным. Вы можете увеличить/уменьшить, как вам удобно.

1

устанавливаемого сотовый синтаксис, имеющие стили, когда один элемент следует за другим является:

element1 + element2{ 
    //styles 
} 

так что вы можете сделать это:

.class_of_element1 + .class_of_element2{ 
    margin-top:20px; 
} 

или

#id_of_element1 + #id_of_element2{ 
    margin-top:20px; 
} 

SAMPLE JSFIDDLE

Смежные вопросы