如何使文本块大小与文本一样大？

如何解决如何使文本块大小与文本一样大？

我的菜单出现问题，该菜单的屏幕宽度为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&amp;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&amp;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属性来尝试。

如何使文本块大小与文本一样大？

如何解决如何使文本块大小与文本一样大？

解决方法

相关推荐