时间戳

首页 > 解决方案 > 无法使标题变小

html - 无法使标题变小

问题描述

我一直在尝试使用填充和边距使我的标题更小，但每次我这样做都不起作用。

body{
    background-color: rgb(20, 9, 59);
    margin: 0%;
    padding: 0%;
    color: aliceblue;
    position: relative;
}


header {
background: black;
position:relative;
margin-bottom: 200px
}


h1{
font-size: 35px;
margin-left: 640px;
position: relative;
}


ul{
margin: 0%;
padding: 0%;
list-style-type: none;
position: relative;
}


li {
display: inline-block;
margin: 5px;
position: relative;
padding-left: 1200px;
}
<!DOCTYPE html>

<html>
    <head><title>TextAhnaf</title></head> 
    <link rel="stylesheet" href="Styles.css">
  <body>
    
    <header>
        <nav>
            <ul>
                <li><a href="Login.html">Login</a></li>
                <h4>Contact</h4>
            </ul>
        </nav>
        <h1>Text</h1>
    </header>
  </body>
</html>

这是网站目前的样子

标签： htmlcss

解决方案

如果我理解你想要做什么。

您需要为标签标题设置最大宽度规则，然后设置 margin: 0 auto，以使您的块居中。

margin: 0 auto;
max-width: 920px;


body{
    background-color: rgb(20, 9, 59);
    margin: 0%;
    padding: 0%;
    color: aliceblue;
    position: relative;
}


header {
background: black;
position:relative;
margin: 0 auto;
max-width: 920px;
height: 200px;
}


h1{
font-size: 35px;
margin-left: 640px;
position: relative;
}


ul{
margin: 0%;
padding: 0%;
list-style-type: none;
position: relative;
}


li {
display: inline-block;
margin: 5px;
position: relative;
padding-left: 1200px;
}
<!DOCTYPE html>

<html>
    <head><title>TextAhnaf</title></head> 
    <link rel="stylesheet" href="Styles.css">
  <body>
    
    <header>
        <nav>
            <ul>
                <li><a href="Login.html">Login</a></li>
                <h4>Contact</h4>
            </ul>
        </nav>
        <h1>Text</h1>
    </header>
  </body>
</html>

推荐阅读