Блог

Главная - Вопросы по программированию - Как сделать размер текстового блока таким же большим, как текст?

Как сделать размер текстового блока таким же большим, как текст?

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

У меня проблема с моим меню, ширина которого на экране составляет 100%, а его высота — 90 пикселей, у меня есть 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:600amp;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>

Ответ №1:

Вот некоторые изменения, которые нужно внести в ваш 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:600amp;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>

Комментарии:

1. Но он работает плохо, размер текстового блока по-прежнему такой же, как у контейнера, и если я наведу курсор мыши под текстом, я все равно смогу щелкнуть по ссылке.

2. Обновлено, чтобы удалить line-height свойство, которое вызывало проблему.

3. Спасибо! И знаете ли вы, почему float:right не работает? Когда я пытаюсь расположить текст справки в правой части экрана

4. Поскольку ваш .container является flexbox, попробуйте использовать .container { justify-content: space-between } вместо этого.

Ответ №2:

Вы можете попробовать это, уменьшив свойство line-height внутри контейнера h2 {}.