Question

我有一个很大的输入字段，我无法弄清楚如何在不使输入字段更大的情况下使文本更大。例如，当我将字体大小设置为2em时，输入字段会增长以占用整个页面。尝试用line-height修复它并且不起作用。有什么建议？谢谢。我收录了当前大小的图片，我希望文字填满这个领域。

目前的情况

HTML：

<table class="contact-table">
            <tr id="test">
                <td id="contact-image">
                    <img id="library" src="library.jpeg"/>
                </td>
                <td id="contact-form">
                    <div class="label-wrapper">
                        <label for="name">Name</label>
                        <input id="name" type="text" name="name" class="top-input">
                    </div>
                    <div class="label-wrapper">
                        <label for="email">Email Address</label>
                        <input id="email" type="text" name="email" class="top-input">
                    </div>
                    <div class="label-wrapper">
                        <label for="message">Message</label>
                        <textarea id="message" type="text" name="message"></textarea>
                    </div>
                </td>
            </tr>
        </table>

CSS：

.contact-table {
    width: 100%;
}

#contact-form {
    width: 50%;
    padding-right: 8%;
}

.label-wrapper {
    text-align: center;
    display: inline-block;
    font-size: 2em;
}

.top-input {
    width: 30em;
    height: 4em;
    border-radius: 5px;
    display: inline-block;
    border: white;
    line-height: inherit;
    font-size:
}

#message {
    width: 61em;
    height: 30em;
    border-radius: 5px;
    border: white;
}

Answer 1

您可以使用rem（或其他方法，如像素大小）来指定输入字段的高度。例如，此代码段将输入文字大小设置为2em，但通过将高度设置为1rem来保持输入框的“正常大小”。

body {
  font-size: 1em;
}

#inputField {
  font-size: 2em;
  height: 1rem;
}

<p>Normal Text</p>
<input id="inputField" />

增加输入字段中的字体大小

1 个答案: