Question

我在表单中有两个输入文本字段，但是我不能让它们具有相同的高度和长度。这是HTML代码：

Raw_Quantity  Unit_Name
500           mL/s
3             liter/s 
6             liter/s
20.780        gallon/s

CSS代码：

<div class="city_form">
    <form>
        <input type="email" name="email" input placeholder="Email Address"/>
        <input type="text" name="text" input placeholder="Zip Code"/>
        <br>
        <input type="submit" value="Submit">
    </form>
</div>

最后，输出：

我做错了什么？注意：我是网络开发的新手。

Answer 1

因为您的输入是相同的样式，所以您应该使用类（不包括类型）：

HTML：

<div class="city_form">
    <form>
        <input type="email" name="email" input placeholder="Email Address"  class="form_input"/>
        <input type="text" name="text" input placeholder="Zip Code" class="form_input"/>
        <br>
        <input type="submit" value="Submit">
    </form>
</div>

CSS：

.city_form {
    width: 100%;
    height: 50px;
    padding: 2px 2px;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
}

.form_input {
    padding-left: 10px;
    width: 30%;
    height: 92%;
    font-size: 100%;
    border-radius: 8px;
}

演示Here!

Answer 2

.city_form {
    width: 100%;
    height: 50px;
    padding: 2px 2px;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
}

.city_form input[type=email] {
    padding-left: 10px;
    width: 30%;
    height: 92%;
    font-size: 100%;
    border-radius: 8px;
}

.city_form input[type=text] {
    padding-left: 10px;
    width: 30%;
    height: 92%;
    font-size: 100%;
    border-radius: 8px;
}

或者简单地说：

.city_form {
    width: 100%;
    height: 50px;
    padding: 2px 2px;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
}

.city_form input[type=email],
.city_form input[type=text]
{
    padding-left: 10px;
    width: 30%;
    height: 92%;
    font-size: 100%;
    border-radius: 8px;
}

Answer 3

你忘记了。在city_form之前

.city_form {
    width: 100%;
    height: 50px;
    padding: 2px 2px;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
}

.city_form[type=email] {
    padding-left: 10px;
    width: 30%;
    height: 92%;
    font-size: 100%;
    border-radius: 8px;
}

.city_form[type=text] {
    padding-left: 10px;
    width: 30%;
    height: 92%;
    font-size: 100%;
    border-radius: 8px;
}

Answer 4

尝试将CSS更改为以下

.city_form input[type=text], .city_form input[type=email] {
padding-left: 10px;
width: 30%;
height: 92%;
font-size: 100%;
border-radius: 8px;
}

您的父元素是一个类为.city_form的文档，输入元素是子元素。

当您可以用逗号分隔目标元素时，您还会不必要地重复相同的样式块。

你也可以给你的输入元素提供与.form-field相同的类，只需定义该类的样式

Answer 5

你补充说。在课堂前面这样补充。像这样.city_form [type = email]和.city_form [type = text]

按照这种方式

.city_form input{
padding-left: 10px;
width: 30%;
height: 92%;
font-size: 100%;
border-radius: 8px;
}

表单文本字段不完全相同

5 个答案: