html - 如何调整输入和按钮元素的大小以适应 div

问题描述

我正在尝试调整我的输入元素和按钮元素的大小以适应其父 div，因为它们离开了 div 并在移动设备上中断，我一直在尝试使用 % 调整高度，但它并没有像我怀疑的那样有帮助。我希望所有按钮/输入始终适合其父 div。

html和css

body {
    background-color: dimgray;
}
.container {
    margin: auto;
    width: 100%;
}
.builder {
    border-radius: 10px;
    height: 90%;
    float: left;
    margin-top: 25px;
    padding: 20px;
    background-color: #272727;
    width: 45%;
}
.builder input {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    margin-bottom: 5%;
    color:#575757;
    background-color: #b4b4b4;
    font-size: 25px;
    width: 50%;
    border-radius: 5px;
}
.builder button {
    border-width: 1px;
    border-color: white;
    float: right;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    color:#575757;
    background-color: #b4b4b4;
    font-size: 25px;
    border-radius: 5px;
}
#color {
    cursor: pointer;
    height: 10%;
    margin-top: 5%;
}
::placeholder {
    color:#575757;
}
input:focus, input:hover, button:focus {
    outline: none;
}
button:hover {
    outline: none;
    background-color: whitesmoke;
}
.code {
    float: right;
    border-radius: 10px;
    height: 90%;
    margin-top: 25px;
    padding: 20px;
    background-color: #272727;
    width: 45%;
}
.code button {
    border-width: 1px;
    border-color: white;
    font-size: 25px;
    border-radius: 5px;
}
.code textarea {
    margin-top: 5%;
    resize: none;
    color:#575757;
    background-color: #b4b4b4;
    font-size: 20px;
    width: 100%;
    height: 92.5%;
    border-radius: 5px;
}
.copy {
    margin: 0 auto;
    display: block;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    font-size: 20px;
}

input:focus, input:hover, textarea:focus, textarea:hover {
    outline: none;
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Embed builder for Niko bot on Discord!">
    <meta name="theme-color" content="#f186fc">
    <link href="./styling/style.css" rel="stylesheet">
    <link rel="icon" href="assets/favicon.png">
    <link rel="apple-touch-icon" href="assets/favicon.png">
    <title>Embed Builder</title>
    <script src="./js/script.js"></script>
</head>

<body>
    <div class="container" id="container">
        <div class="builder" id="builder">

            <input type="color" id="color">

            <input type="text" placeholder="Plaintext" id="plaintext" class="plaintext">

            <input type="url" placeholder="Icon URL" id="icon-url">

            <input type="text" placeholder="Name" id="name">

            <input type="text" placeholder="Thumbnail URL" id="thumbnail-url">

            <input type="text" placeholder="Title" id="title">

            <input type="text" placeholder="Description" id="description">

            <input type="url" placeholder="Image URL" id="image-url">

            <input type="text" placeholder="Footer Icon URL" id="footer-icon-url">

            <input type="text" placeholder="Footer Text" id="footer-text">

            <button onclick="submit()" id="submit">Get Code</button>

        </div>
    </div>
    <div class="code" id="code">
        <button onclick="copy()" class="copy" id="copy">Copy</button>
        <textarea id="code-box" readonly></textarea>
    </div>
    </div>
</body>

</html>

标签： htmlcss

html - 如何调整输入和按钮元素的大小以适应 div

问题描述

解决方案

推荐阅读