如何解决如何使文本块大小与文本一样大？
我的菜单出现问题，该菜单的屏幕宽度为100％，高度为90px，菜单内有2个文本，问题是文本块的大小比文本大得多，它们分别是与菜单容器的高度一样高 我会给你看图片以更好地了解。
因此，如您所见，浅蓝色是文本的块，橙色是页边距，红色是我要从浅蓝色块制作的大小。
由于某种原因float:right也不起作用，我尝试了“帮助”文本，但是什么也没发生。
所以有人可以帮助我吗？
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins',sans-serif;
overflow-x: hidden;
height: 100%;
padding: 0;
margin: 0;
}
.container {
display:inline-flex;
margin: auto;
width: 100%;
height: 90px;
border-bottom: 1px solid #e6e6e6;
}
.container h2 {
font-size: 38px;
margin-top: px;
color: #333;
font-weight: 700;
line-height: 90px;
margin: 0 30px;
}
.container a {
display: contents;
text-align: right;
text-decoration: none;
color: #333;
font-size: 0.9rem;
transition: .3s;
}
.container a:hover {
color: #333;
text-decoration: underline;
}
a{
display: block;
text-align: right;
text-decoration: none;
color: #333;
font-size: 0.9rem;
transition: .3s;
}
a:hover{
color: #0092f3; /*#1056c9;*/
text-decoration: underline;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style-login.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a81368914c.js"></script><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="container">
<!-- <img src="logo.svg" class="logo" width="250px" height="77px"> -->
<a href="index"><h2>Home</h2></a>
<div class="help">
<a href="help"><h2>Help</h2></a>
</div>
</div>
</body>
</html>解决方法
这是对CSS进行的一些更改。注释掉的字段是我从您的帖子中删除的字段：
.container {
align-items: center;
}
.container a {
/* display: contents; */
}
.container h2 {
/* line-height: 80px; */
display: inline;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins',sans-serif;
overflow-x: hidden;
height: 100%;
padding: 0;
margin: 0;
}
.container {
display:inline-flex;
align-items: center;
margin: auto;
width: 100%;
height: 90px;
border-bottom: 1px solid #e6e6e6;
}
.container h2 {
font-size: 38px;
margin-top: px;
color: #333;
font-weight: 700;
margin: 0 30px;
display: inline;
}
.container a {
text-align: right;
text-decoration: none;
color: #333;
font-size: 0.9rem;
transition: .3s;
}
.container a:hover {
color: #333;
text-decoration: underline;
}
a{
display: block;
text-align: right;
text-decoration: none;
color: #333;
font-size: 0.9rem;
transition: .3s;
}
a:hover{
color: #0092f3; /*#1056c9;*/
text-decoration: underline;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style-login.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a81368914c.js"></script><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="container">
<!-- <img src="logo.svg" class="logo" width="250px" height="77px"> -->
<a href="index"><h2>Home</h2></a>
<div class="help">
<a href="help"><h2>Help</h2></a>
</div>
</div>
</body>
</html>,
您可以通过减少容器h2 {}中的line-height属性来尝试。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。