Блог

Главная - Вопросы по программированию - HTML Уменьшает расстояние между строками и ширину столбцов

HTML Уменьшает расстояние между строками и ширину столбцов

#html #css

#HTML #css

Вопрос:

У меня проблема. Я создал следующую форму:

 .input-block {
    width: 100%;
    padding-bottom: 40px;
}

.input-block span { 
    font-size: 19px;
}

.input-block table {
    width: 100%;
    border-spacing: 0;
}

.input-block td {
    width: 10%
}

.input-block input, select {
    width: 50%;
    font-size: 16px;
}

.input-block input, select {
  padding: 6px 6px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #000;
  box-sizing: border-box;
}  
 <div class="input-block">
    <h2>Account information</h2>
    <table>
        <tr>
            <td>
                <span>Voornaam</span>
            </td>
            <td>
                <input type="text" value="Alexander" />
            </td>
        </tr>
        <tr>
            <td>
                <span>Tussenvoegsel</span>
            </td>
            <td>
                <input type="text" value="van" />
            </td>
        </tr>
        <tr>
            <td>
                <span>Achternaam</span>
            </td>
            <td>
                <input type="text" value="Dijk" />
            </td>
        </tr>
        <tr>
            <td>
                <span>Email</span>
            </td>
            <td>
                <input type="text" value="alexandervdijk@gmail.com" />
            </td>
        </tr>
    </table>
</div>
<div class="input-block">
    <h2>Wachtwoord veranderen</h2>
    <table>
        <tr>
            <td>
                <span>Nieuw wachtwoord</span>
            </td>
            <td>
                <input type="password" value="" />
            </td>
        </tr>
        <tr>
            <td>
                <span>Herhaal wachtwoord</span>
            </td>
            <td>
                <input type="password" value="" />
            </td>
        </tr>
    </table>
</div>
<div class="input-block">
    <h2>Profiel informatie</h2>
    <table>
        <tr>
            <td>
                <span>Geslacht</span>
            </td>
            <td>
                <select id="geslacht" name="geslacht">
                    <option value="man" selected>Man</option>
                    <option value="vrouw">Vrouw</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <span>Nationaliteit</span>
            </td>
            <td>
                <select id="nationaliteit" name="nationaliteit">
                    <option value="nederland" selected>Nederland</option>
                    <option value="belgie">Belgie</option>
                    <option value="duitsland">Duitsland</option>
                    <option value="frankrijk">Frankrijk</option>
                </select>
            </td>
        </tr>
    </table>
</div>

Теперь это почти так, как я хочу, но я не могу изменить 2 вещи:

  • Я хочу уменьшить интервал между строками в таблице, чтобы элементы были более компактными на экране. Пространство не должно исчезать, но немного меньше
  • input Поля и имена перед полями ввода могут быть ближе друг к другу. Я уже пытался установить ширину 10% td в table , но это не сработало.

Может кто-нибудь помочь мне изменить макет?

Ответ №1:

Я немного скорректировал ваш код, в основном только CSS.

Вы ищете что-то более похожее на это?

Я установил заданную ширину для вашего ввода

 .input-block input, select {
    width: 300px;
    font-size: 16px;
}

и уменьшенная ширина вашего блока ввода

 .input-block {
    width: 70%;
    padding-bottom: 40px;
}
  

 .input-block {
    width: 70%;
    padding-bottom: 40px;
}

.input-block span { 
    font-size: 19px;
}

.input-block table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.input-block td {
    width: 10%;
}

.input-block input, select {
    width: 300px;
    font-size: 16px;
}

.input-block input, select {
  padding: 6px 6px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #000;
  box-sizing: border-box;
}  
 <div class="input-block">
    <h2>Account information</h2>
    <table>
        <tr>
            <td>
                <span>Voornaam</span>
            </td>
            <td>
                <input type="text" value="Alexander" />
            </td>
        </tr>
        <tr>
            <td>
                <span>Tussenvoegsel</span>
            </td>
            <td>
                <input type="text" value="van" />
            </td>
        </tr>
        <tr>
            <td>
                <span>Achternaam</span>
            </td>
            <td>
                <input type="text" value="Dijk" />
            </td>
        </tr>
        <tr>
            <td>
                <span>Email</span>
            </td>
            <td>
                <input type="text" value="alexandervdijk@gmail.com" />
            </td>
        </tr>
    </table>
</div>
</div>