0

我一直忙于创建一个网站，但我发现了一个我不知道解决方案的错误。

在这里你可以看到我的文本对齐（测试）不是一直到内容的左边

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>The HTML5</title>

    <link rel="stylesheet" href = "style.css">
    
    <style>
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>Zieke Site</h1>
        </div>
        
        <div class="topnav">
            <a href="#">Menu</a>
        </div>

        <div class="content">
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p> 
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p> 
            <p>Test</p>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p> 
          <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p> 
           <p>Test</p><p>Test</p>
            <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p> 
        <p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p> 
        <p>Test</p> 
        <p>Test</p>
        </div>


        <div class="footer">
            <p>Footer</p>
        </div>
</div>

</body>
</html>

这是我的 CSS

body {
margin: 0;
}

.topnav {
background-color: #333;
height: 28px;
}

.topnav a {
float: left;
color: white;
padding: 5px 15px;
text-decoration: none;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.header {
background-color: #747474;  
text-align: center;
height: 80px;
line-height: 80px;
}

.content {
background-color: rgba(255, 255, 255, 0.9);
text-align: left;
height: Calc(100vh - 182px);
overflow: auto;
}

.footer {
background-color: #747474;
text-align: right;
padding: 1px 20px;  
}

.container {
margin: 0 auto;
width: 70%;
}

希望我能在这里找到帮助，我对编码很陌生，所以如果它很容易解决，请不要怪我：D！

4

4 回答 4

0

使容器样式中的宽度属性为 100%

.container {
margin: 0 auto;
width: 100%;
}
于 2021-09-09T07:18:11.663 回答
0

试试下面的代码：

注意：确保在整页上运行脚本！

body {
margin: 0;
}

.topnav {
background-color: #333;
height: 28px;
}

.topnav a {
float: left;
color: white;
padding: 5px 20px;
text-decoration: none;
}

.topnav a:hover {
background-color: #ddd;
color: black;
}

.header {
background-color: #747474;
text-align: center;
height: 80px;
line-height: 80px;
}

.content {
background-color: rgba(255, 255, 255, 0.9);
text-align: left;
height: calc(100vh - 182px);
overflow: auto;
padding: 0px 20px;
}

.footer {
background-color: #747474;
text-align: right;
padding: 1px 20px;
}

.container {
margin: 0 30px;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>The HTML5</title>
    <link rel="stylesheet" href="style.css">
    <style>

    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>Zieke Site</h1> </div>
        <div class="topnav"> <a href="#">Menu</a> </div>
        <div class="content">
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
            <p>Test</p>
        </div>
        <div class="footer">
            <p>Footer</p>
        </div>
    </div>
</body>

</html>

于 2021-09-09T08:09:40.390 回答
0

也许这

.content {
background-color: rgba(255, 255, 255, 0.9);
text-align: right;
padding-right: 10px;
height: Calc(100vh - 182px);
overflow: auto;
}
于 2021-09-09T07:28:47.413 回答
-1

您可以添加此代码

 <div style="clear:both"></div>

后

 <div class="topnav">
        <a href="#">Menu</a>
  </div>

100% 会工作，在这里测试https://jsfiddle.net/trysetyoutomo/xcL3f8ao/6/

于 2021-09-09T07:21:20.833 回答