Не удается получить поля для размещения в одной строке с помощью CSS

Question

Не удается получить поля для размещения в одной строке с помощью CSS

0

EDIT: Чтобы уточнить, я хочу, чтобы все 4 элемента в одной строке соответствовали 100%. Я знаю, что могу изменить%, но я хочу, чтобы они слились с краем div

Я пытаюсь сделать мои метки и поля ввода подходящими в одной строке и на основе% будет изменяться по мере необходимости.

Проблема в том, что я не могу заставить их все вписываться в одну строку - я думаю, что это имеет какое-то отношение к заполнению или полям где-то, но не может понять это.

Я сделал JSfiddle здесь http://jsfiddle.net/ZxRAu/

И вот соответствующий CSS

.generalcontainer {
    width:65%;
    margin:5%;
    height:600px;
    float:left;
    background-color: #CCCCCC;
    border: 0px;
}
.generalcontainer > span {
    font-family: Calibri;
    font-size: 14px;
    padding: 4px;
    margin: 0px;

.generalcontainer > span.label {
    color: #000000;
    font-weight: normal;
    display: inline-block;
    width:25%;
}
.smallentryfield {
    color: #000000;
    font-weight: bold;
    width: 25%;
    padding: 4px;
    margin: 0px;
}
select.smallentryfield {
   box-sizing: content-box;
 }

Winters 19 окт. 2013, в 05:57

Источник

Теги:

html

css

3 ответа

0

Начинается снова и используется руководство Walmiks для контейнеров в данных. Также установите% на основе прокладки, чтобы получить его идеально.

IE

form {
    width:98%;
    line-height:24px;
    padding: 1% 1% 0 1%;
}

Проверьте JSfiddle ниже

http://jsfiddle.net/FYdhz/

Winters 19 окт. 2013, в 06:50

0

Я думаю, он просто требовал <br> тег там, посмотрите на пример:

http://jsfiddle.net/afzaal_ahmad_zeeshan/ZxRAu/1/

Или если вы хотите это:

http://jsfiddle.net/afzaal_ahmad_zeeshan/ZxRAu/2/

Я просто уменьшаю width до 20%. И это работает :)

Были маржи и прокладки, которые вызывают проблему. Из-за чего 25% для четырех элементов будут на 100% и оставшейся прибыли. Таким образом, строка была сломана и сформирована 2 ряда.

Таким образом, добавление 20% удалило проблему. Вы можете посмотреть в скриптах.

Afzaal Ahmad Zeeshan 19 окт. 2013, в 01:12

0

Спасибо за ваш комментарий, но я пытаюсь сделать так, чтобы они соответствовали краю деления, поэтому уменьшение до 20% на самом деле не работает.
Winters 19 окт. 2013, в 03:39
0

Тогда вы можете увеличить процент до чуть больше! :) 20% был не единственным вариантом ..
Afzaal Ahmad Zeeshan 19 окт. 2013, в 03:40

Ещё вопросы

Спасибо за ваш комментарий, но я пытаюсь сделать так, чтобы они соответствовали краю деления, поэтому уменьшение до 20% на самом деле не работает.
Тогда вы можете увеличить процент до чуть больше! :) 20% был не единственным вариантом ..

walmik · Accepted Answer · 2013-10-19T02-21-00.000Z

Могут быть много причин, по которым 25% не работают точно так, как вы ожидаете. Одна из причин заключается в том, что у вас есть элемент, который имеет ширину, установленную в процентиле, но отступы находятся в пикселях. Другой причиной могут быть входные элементы без учета применяемой на них ширины из-за их границ, полей и отступов. Хотя вы можете установить все из них в 0, вы все равно столкнетесь с некоторыми проблемами, когда вы установите отображение на встроенный блок coz, который добавит некоторое пространство в нижней части элемента таким образом, чтобы он отображал невидимое поле после элемента если, конечно, вы не используете какую-либо комбинацию вертикального выравнивания в верхнем и верхнем размерах шрифта или линии.

Возможное решение состоит в том, чтобы иметь контейнерный элемент для каждого из элементов формы и установить ширину контейнера на 25% и установить его для отображения: блок вместе с float: left. Затем вы можете установить ширину внутреннего элемента на 100% и удалить их отступы и поля.

Например:

<div class="container">
    <label>First name</label>
</div>
<div class="container">
    <select>
        <option selected="selected" value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
    </select> 
</div>
<div class="container">
    <span>First name</span>
</div>
<div class="container">
    <input type="text"></input>
</div>

Я называю это контейнером как пример. Вы можете изменить его на что угодно. Вы можете установить CSS-код для контейнера примерно так:

div.container {
    color: #000000;
    font-weight: normal;
    display: block;  /*you need this only if you use a span (as per your example)*/
    width:25%;
    float: left;
    padding: 0px;
    margin: 0px;
}

И, наконец, для CSS для внутренних элементов вы можете сделать что-то вроде:

div.container input[type=text], div.container select {
    width: 100%;
    padding: 0px;
    margin: 0px;
    border: 0px;
}

Это всего лишь предложение о том, какое направление вы можете предпринять для решения этой проблемы. Здесь вы можете начать играть с этой концепцией в вашем конкретном сценарии: http://jsfiddle.net/f8dUC/3/

Надеюсь, это поможет!

не совсем идеально, но я начал с нуля и использовал контейнеры для всех данных формы и сумел все сделать правильно, спасибо.