Question

我正在查看名为'mainsearchsection'的div，我在每个搜索字段的上方和左侧看到少量灰色。我不知道为什么？关于边距或填充是否有些混乱？

<div class="mainsearchsection">
        <h1>Share gifts with friends.</h1>
        <h2>Services to exchange from every country.</h2>
        @using (Html.BeginForm("Search", "Gifts", FormMethod.Get))
        {
            <div class="mainsearchdiv">
                <input class="mainsearch" type='search' name='searchTerm' value='Gifts' data-ouluvu-autocomplete="@Url.Action("AutoComplete")" />
                <input class="mainlocation" type="text" name="location" value="Location" />
                <input class="mainavailability" type="text" name="availability" value="Availability" />
                <input class="mainsubmit" type='submit' value='Search' />
            </div>
        }
    </div>


.mainsearchdiv {
border: 2px solid black;
padding: 2px 2px 2px 2px;
background-color: black;
border-radius: 5px;
}

.mainsearch {
width: 300px;
height: 35px;
margin-left: 2px;
border-radius: 5px;
}

.mainsubmit {
height: 35px;
width: 80px;
border-radius: 5px;
}

.mainlocation {
height: 30px;
border-radius: 5px;
}

.mainavailability {
height: 30px;
border-radius: 5px;
}

Answer 1

浏览器会自动为输入字段添加边框。尝试使用重置样式表或使用

input {
 border: 0;
}

http://jsfiddle.net/XLhsR/1/

Answer 2

默认情况下，文字输入有边框，这就是您在此处看到的内容。要关闭它，请执行此操作

.mainsearchsection input {
    border-width:0;
}

查看更多：http://jsfiddle.net/XLhsR/4/

为什么我的div中有灰色

2 个答案: