HTML - Как я могу контролировать размещение элементов

0

Я быстро нацарапал следующую страницу

Изображение 174551

Но то, что я хочу представить (это то же, что и другое размещение)

Изображение 174551

Мой оригинальный код был

<body>

  <p><b>My Title</b></p>

  <input type="radio" name="ReTranslate" id="TranslateByDate" value="ByDate" checked="checked">By Date:
    <input type="text" id="PackagesDate" /><br>
  <input type="radio" name="ReTranslate" id="TranslateByGuid" value="ByGuid">By Guid
    <input type="text" id="PackageGuid"> <br>
  <input type="radio" name="ReTranslate" id="TranslateByKey" value="ByKey">By Key:
    Field name <input type="text" id="PackageName">  Field number <input type="text" id="VersionNumber"> User name <input type="text" id="UserName"><br> 

  <br>
  <button type="button">ReTranslate</button>
</body>

Как я могу управлять размещением элементов?
Благодарю.

  • 0
    Использование CSS
Теги:

3 ответа

2
Лучший ответ

Вы можете сделать это двумя способами:

  1. Таблицы (простой способ)

    Используя таблицы, вы можете сделать так:

    <table>
  <tr>
    <td>
      <input type="radio" name="ReTranslate" id="TranslateByDate" value="ByDate" checked="checked">By Date:
    </td>
    <td><input type="text" id="PackagesDate" /></td>
  </tr>
</table>

  2. CSS

    Добавьте <ul></ul>.

    <ul>
    <li><label for=""></label><input type="text"></li>
    <li><label for=""></label><input type="text"></li>
    <li><label for=""></label><input type="text"></li>
    <li><label for=""></label><input type="text"></li>
</ul>

    И дайте label какой-то стиль, как:

    label {display: inline-block; width: 75px;}

Резюме

Использование <table> для макетов не рекомендуется для макетов. Использование <ul> полезно для семантики.

Поделиться
  • 2
    Возможно, кто-то считает, что таблицам нет места в HTML ... Существует множество подходов к оформлению стилей, таблицы являются допустимым вариантом.
  • 0
    Я также объяснил, какой метод лучше.
Показать ещё 3 комментария
0

У вас есть несколько вариантов.

  • поместите все элементы таблицы в порядок и выровняйте их.
  • Вы также можете использовать DIV и структурировать входы и т.д. В разных контейнерах, чтобы выровнять его так, как вы хотите
Поделиться
0

Попробуйте разместить br-теги между текстом "By Key:", "Имя поля", "Номер поля" и "Имя пользователя". Затем после этого установите желаемый запас в левой части текста. (Маржа налево:... рх)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню