Question

所以我正在尝试设计我的网站，我的导航栏和图像之间存在很大的差距。我在哪里做错了？

另外注意：有没有人知道我怎么能“装箱”我的整个页面让两侧有空白空间？

HTML：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Design</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="box">
                <div id="header">
                    <br />
                    <div style="margin-left: 1250px;">
                        <input id="sweBtn" type="button" value="SVENSKA" />
                        <input id="engBtn" type="button" value="ENGLISH" />
                        <input id="searchTxt" type="text" />
                        <input id="searchBtn" type="button" value="SÖK" />
                    </div>
                    <br />
                </div>
                <div class="col-sm-4 text-left" id="imgTitle">
                    <h1>Header</h1>
                    <p>Text</p>
                </div>
                <div class="col-sm-4">
                    <img id="imgHeader" src="~/img/Header.png" />
                </div>
                <div id="navBar">
                    <ul>
                        <li><a class="active" href="#home">Home</a></li>
                        <li><a href="#news">News</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li><a href="#about">About</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <footer></footer>
</body>
</html>
<link href="~/Content/custom.css" rel="stylesheet" />

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

        li a:hover {
            background-color: #111;
        }

#header {
    background-color: #503F31;
    color: white;
    padding: 30px;
}

#sweBtn {
    font-family: 'Times New Roman';
    background-color: Transparent;
    color: grey;
}

#engBtn {
    font-family: 'Times New Roman';
    background-color: Transparent;
    color: gold;
}

#searchTxt {
    background-color: grey;
    border-color: grey;
}

#searchBtn {
    font-family: 'Times New Roman';
    background-color: Transparent;
    color: gold;
}

#imgTitle {
    position: absolute;
}

#imgHeader {
    height: 1000px;
    width: 3400px;
}

#footer {
    background-color: grey;
    color: white;
    padding-bottom: -250px;
}

Answer 1

如果您不想要导航栏和图像之间存在较大的白色空白，则可能需要尝试这样的操作。 img{margin-top:-30px;}

Answer 2

在css中将图像大小设置为3400px x 1000px是不是可以做？

您还可以在css中将display: block;放在图片上，以消除任何难看的间隙。

To＆＃39; box＆＃39;您所说的页面，为容器指定宽度或最大宽度margin:auto;

HTML和HTML中的大白差距CSS

2 个答案: