Невозможно выровнять правые края элементов формы, используя ширину в процентах - PullRequest
Новая
       17

Невозможно выровнять правые края элементов формы, используя ширину в процентах

0 голосов
/ 25 января 2012

Проще говоря, проблема такова:

Если первый элемент формы использует 90% ширины страницы, почему второй ряд элементов, использующий 35% и 55%, не использует такое же количествоширина страниц?

Я считаю, что мне нужно подправить% вверх, различая суммы в зависимости от элементов / композиции страницы.

Еще более запутанно, когда ширина браузера изменяется (сужается), столбцы в конечном итоге выравниваются и уменьшаются, нопроблема становится перевернутой с первой строкой, более узкой, чем вторая.

Я пытался искать, но моя проблема перепутана с людьми, желающими, чтобы их элементы формы справа.Так что теперь моя очередь задавать плохой вопрос.:) Я просто хочу, чтобы мои элементы формы были аккуратными, чтобы правый край каждого элемента соответствовал остальным.

Простой пример: 

<html>
    <head>
        <title>Form</title>
        <style text="text/css">
            <!--
html, body {
    margin:0; padding:0;
}
form {
    display: block;
}

.inputField {
    width: 90%;
}
.labelField {
    width: 35%;
}
#secondField {
    width: 55%;
}
            -->
        </style>
    </head>
    <body>
        <form>
            <legend>This is the form</legend>
            <input class="inputField" id="firstField" type="tel" name="cardNo" /><br />
            <label class="labelField" for="secondField">Please enter your name:</label>
            <input class="inputField" id="secondField" type="tel" name="cv2" /><br />
            <input class="inputSubmit" id="submit" type="submit" /><br />
        </form>
    </body>
</html>

Iпробовал использовать dl / dt / dd и ужасные таблицы / tr / td и даже формы ul / li.Все страдают схожими проблемами.Некоторые браузеры, такие как Firefox, только немного вышли, но Chrome и iOS хорошо освещают проблему.В идеале было бы неплохо решение, которое конкретно работает в браузерах Android и iOS.

Фактическая форма, с которой я имею дело, имеет следующую структуру: 

Select Input
Text Input
Select Input | Select Input
Label        | Text Input
Submit       | Label        | Checkbox

Ответы [ 2 ]

1 голос
/ 26 января 2012

Ну, не углубляться слишком глубоко, но ваша проблема, похоже, коренится в том, как вы структурируете свою форму в целом. Создать макет стиля формы довольно просто, если вы его немного спланировали. Помните, что браузеры, такие как FF и IE, отображают такие вещи, как отступы и тому подобное. Кроме того, многие элементы имеют встроенные отступы, поля и т. Д., Которые могут вызвать хаос на вашей странице, особенно при использовании процентов. Фактически, если вы воспользуетесь приведенным ниже кодом, вы заметите, что в позиционирование кнопки было добавлено немного дополнительного отступа, чтобы компенсировать разницу, вызванную другими элементами.

Вот CSS: 

html, body {
  margin:0; 
  padding:0;
}

form {
  display: block;
}

input[type="submit"]
{
  width:150px !important;  
}

.base-form
{
  width:100%;
}

.base-form p label
{
  width: 15%;
  display:inline-block;
}

.base-form p input
{
  width: 55%;
}

.base-form .btn-row
{
  width:70%;
  padding:0px 10px;
}

.base-form .btn-row p
{
  text-align:right;
}

А вот и HTML: 

<form class="base-form">
   <legend>This is the form</legend>
   <p>
      <label for="firstField">Please enter your name:</label>
      <input id="firstField" type="tel" name="cardNo" />
   </p>
   <p>
      <label for="secondField">Please enter your telephone:</label>
      <input id="secondField" type="tel" name="cv2" />
   </p>
   <div class="btn-row">
      <p>
         <input id="submit" type="submit" />
      </p>
   </div>
</form>

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

0 голосов
/ 25 января 2012

Когда вы находитесь в строке, содержащей ширину 90%, использование 55% и 35% даст вам 90% ширины 90%. Например, если вы хотите половину и половину 90%, вы бы использовали 50% и 50% - это будет использовать 100% от 90%.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...