Блог

Главная - Вопросы по программированию - Создание макета, следующего ширине текстового поля

Создание макета, следующего ширине текстового поля

#html #css

#HTML #css

Вопрос:

Итак, я пытаюсь получить следующий макет, который состоит из трех элементов: внешней оболочки (div), текстового поля и элемента circle:

введите описание изображения здесь

Но проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы ширина внешней оболочки div масштабировалась в зависимости от ширины текстового поля, то есть, если ширина текстового поля меньше, оно также уменьшится.

введите описание изображения здесь

Прямо сейчас у меня есть следующее в HTML:

введите описание изображения здесь

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

 html, body {
    height: 100%;
}

.main {
    border: 1px solid black;
    height: 50%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer_shell {
    border: 1px solid black;
    border-radius: 40px;
}

.circle {
    width: 20%;
    height: 20%;
    background: blue;
}

#text_in {
    width: 50%;
    height: 100%;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class = "main">
        <div class = "outer_shell">
            <div class = "circle"></div>
            <input type = "text" id = "text_in">
        </div>
    </div>
    
</body>
</html>

Ответ №1:

Прежде всего, вам нравится ваш рисунок. Вы должны использовать width: fit-content для вашего outer_shell

Ответ №2:

Я немного поэкспериментировал с предоставленным кодом и обнаружил, что HTML выглядит нормально. Ошибка была обнаружена в файле CSS. Следующий фрагмент кода должен работать:

 html, body {
    height: 100%;
}

.main {
    border: 1px solid black;
    height: 50%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer_shell {
    border: 1px solid black;
    border-radius: 40px;
    display: inline-flex;
    width: fit-content;
}

.circle {
    width: 20px;
    background: blue;
    border-radius: 50%;
    padding: 1px;
}

#text_in {
    width: 200px;
    height: 100%;
    margin-left: 5px;
    margin-right: 10px;
    float: right;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class = "main">
        <div class = "outer_shell">
            <div class = "circle"></div>
            <input type = "text" id = "text_in">
        </div>
    </div>
    
</body>
</html>

Комментарии:

1. спасибо, но ширина внешней оболочки не изменяется, если ширина текстового поля уменьшается

2. Я применил width: fit-content for outer_shell , как предложил Дэвид, и теперь все работает нормально.