Упорядочивание html-элементов в определенном макете

#html #css

#HTML #css

Вопрос:

Я новичок в HTML, и я практикую некоторые макеты, в которых я пытаюсь получить что-то вроде приведенного ниже:

Но у меня возникают трудности с получением макета «Фамилия», который находится рядом с полем «Заголовок», а текстовое поле «Фамилия» выровнено с более длинным текстовым полем GivenName в конце.

Я попытался выполнить следующее:

Но я не мог заставить фамилию отображаться рядом с «Заголовком» и убедиться, что конец его текстового поля выровнен с заданным текстовым полем name в конце.

Был бы признателен за помощь в этом.

HTML и CSS-код:

 .small_field {
    width: 80px;
    margin-left: 10px;
}

.long_field {
    width: 200px;
    margin-left: 10px;
}

.entity {
    margin-top: 10px;
}

 <!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>testform</title>
    <link rel = "stylesheet" href = "test2.css">
</head>

<body>
    <div class = "entity">
        <label >Title</label>
        <input type = "text" id = "title" disabled class = "small_field">
    </div>
    <div class = "entity">
        <label >Surname</label>
        <input type = "text" id = "surname" disabled class = "small_field">
    </div>
    <div class = "entity">
        <label id = "">GivenName</label>
        <input type = "text" id = "givenname" disabled class = "long_field">
    </div>
</body>

1. Вы пробовали float: left; ?

2. Вы хотите, чтобы поля были одинаковой ширины? Или что?

3. @user13806962 извините, если вы запутались, но я просто пытаюсь добиться макета, подобного первому изображению. Возможно, давайте оставим это таким простым.

Ответ №1:

Здесь можно использовать Flex :

 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

form,
.entity {
  display: flex;
}

form {
  flex-wrap: wrap;
}

.entity.full {
  min-width: 90%;
}

.entity,
.entity>* {
  flex: 1;
  margin: 10px 10px 0 0
}

.entity>.long_field {
  flex: 3.35;
}

input {
  border: green solid;
}

label {
  text-align: right;
  padding-right: 1em;
}

 <form>
  <div class="entity">
    <label>Title</label>
    <input type="text" id="title" disabled class="small_field">
  </div>
  <div class="entity">
    <label>Surname</label>
    <input type="text" id="surname" disabled class="small_field">
  </div>
  <div class="entity full">
    <label id="">GivenName</label>
    <input type="text" id="givenname" disabled class="long_field">
  </div>
</form>

смотрите это руководство, чтобы идти дальше: https://css-tricks.com/snippets/css/a-guide-to-flexbox /

сетка также возможна, вот еще одно руководство https://css-tricks.com/snippets/css/complete-guide-grid / .

 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

form {
  padding: 10px;
}

form,
.entity {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.entity {
  grid-template-columns: auto 1fr;
}

.entity.full {
  grid-column: auto / span 2;
}

label {
  width: 8em;
  text-align: right;
}

input {
  border: solid green;
}

 <form>
  <div class="entity">
    <label>Title</label>
    <input type="text" id="title" disabled class="small_field">
  </div>
  <div class="entity">
    <label>Surname</label>
    <input type="text" id="surname" disabled class="small_field">
  </div>
  <div class="entity full">
    <label id="">GivenName</label>
    <input type="text" id="givenname" disabled class="long_field">
  </div>
</form>

1. да, пример был бы отличным. Технически я бы тоже избегал использования таких методов, как position: absolute и so, потому что я читал, что это не очень хороший способ позиционирования элементов, поскольку он может легко сломаться при изменении размера или т. Д.

2. @Maxxx хорошо, добавлен пример сетки. Мне также не нравится absolute для отправки макета. это не сделано для этого. ИМХО . 😉

Ответ №2:

Существует множество способов размещения элементов рядом друг с другом. Простой способ — поместить a div вокруг полей заголовка и фамилии и указать его display: flex .

Ответ №3:

Я не совсем понимаю, чего вы пытаетесь достичь, но если вы пытаетесь изменить положение u Surname , можете добавить position : absolute; в css, а затем с left : помощью и top : u можете поместить его куда угодно