Question

我有这个网页，我似乎无法使这些对象的宽度对齐。我可以手动调整每个像素的宽度，但这似乎可以避免实际问题。

我希望homeLinkContainer直接位于搜索框下方并且宽度完全相同，但我似乎无法做到这一点。

<!DOCTYPE html>
<HTML>
    <HEAD>
        <STYLE>
            html {
                background: #FFFFEC;
                }

            #search {
                width: 390px;
                margin-left: auto;
                margin-right: auto;
                padding-right: 10px;
                }

            #searchBox {
                width: 100%;
                border: 1px solid #E6e6e6;
                font-size: 25px;
                padding-left: 10px;
                }

            #searchBox:hover {
                border: 1px solid #bebebe;
                transition-property: border-color;
                transition-duration: 0.2s;
                }

            #homeLinkContainer {
                width: 400px;
                height: 400px;
                background: #FFF;
                border: 1px solid #E6e6e6;
                margin-top: 10px;
                margin-left: auto;
                margin-right: auto;
                }
        </STYLE>
    </HEAD>
    <BODY>
        <form ID="search" method="get" action="https://next.duckduckgo.com/">
            <input ID="searchBox" type="text" name="q" id="s" class="input" placeholder="Search" autofocus="autofocus" />
        </form>
        <DIV ID="homeLinkContainer">
            Contents
        </DIV>
    </BODY>
</HTML>

Answer 1

#search {
width: 402px; /* accounts for the 2 pixels of border that the bottom div has */
margin-left: auto;
margin-right: auto;
/* padding-right: 10px; */ /* why was that here? */
}
#searchBox {
width: 100%;
border: 1px solid #E6e6e6;
font-size: 25px;
padding-left: 10px;
box-sizing: border-box; /* makes the padding not mess with the width */
margin: 0; /* input elements sometimes have default margins */
}
#homeLinkContainer {
width: 400px;
height: 400px;
background: #FFF;
border: 1px solid #E6e6e6;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}

Answer 2

你必须照顾好你的边界。如果你添加一个边框，它会在框中添加边框像素...所以尝试调整悬停的框的大小。

CSS非匹配宽度

2 个答案: