Блог

Главная - Вопросы по программированию - Как преобразовать элемент уровня блока в встроенный с помощью CSS

Как преобразовать элемент уровня блока в встроенный с помощью CSS

#css

#css

Вопрос:

Допустим, у меня есть этот контент:

 <div class="entry">
<p>I want to display <br /><h2>heading level elements like this</h2>
<p> as inline elements on the same line with the text that preceded them as well as...</p>
<p>the text that<br />
<h3>(another heading element)</h3>
<p>, follows them...</p>
</p></p>
</div>

И я хочу, чтобы элементы заголовка отображались как встроенные в текст, так же, как если бы они были просто жирным шрифтом, того же размера, что и содержимое.

Есть идеи, какой CSS мог бы выполнить это в приведенном выше примере без изменения содержимого?

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

1. сначала вам нужно выполнить поиск в Google и stackoverflow. Это основной вопрос

Ответ №1:

Используйте display:inline свойство:

 .entry h2,  /* Combining two selectors: h2/h3 as a child of class=entry */
.entry h3 {
    display: inline;
}

Смотрите также: MDN, отображение CSS

Ответ №2:

Вы можете использовать display: inline или display: inline-block . Используйте последний, если вы хотите задать ширину или высоту элемента. inline-block ведет себя как block элемент, за исключением того, что он отображает его встроенным.

 .entry h2, .entry h3 {
    display: inline;
}

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

1. <img> это пример того, что есть display: inline-block по умолчанию. (Вероятно, это не то, что вы хотите для текста.)

Ответ №3:

Вы можете сделать что-то подобное : 

  h3{display:inline; }

Или вы можете поместить вместо него span и придать ему тот же стиль, что и H3

 <div class="entry">
<p>I want to display <br /><h2>heading level elements like this</h2>
<p> as inline elements on the same line with the text that preceded them as well as...</p>
<p>the text that<br />
<span class="h3Like">(another heading element)</span>
<p>, follows them...</p>
</p></p>
</div>

И добавьте css, подобный этому

 .h3Like{font-size:15px;font-weight:bold}

Ответ №4:

 <!DOCTYPE html>
<html lang="en">
<head>
    <title>block to inline</title>
    <style>
         h1 {
            display: inline;
         }
         span {
            display: block;
         }
    
    </style>

</head>
<body>
       
       <p>lorem itaque <h1>block element to inline</h1> quia <p>

       <p>lorem res <span>inline to block </span> reprehenderit, anime</p>
</body>
</html>

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

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

2. Как мы знаем, h1 — это элемент блока, который я использовал внутри тега <P>, но в стиле, который я сделал как встроенный элемент, так что теперь h1 в теге <p> становится встроенным элементом, причина которого в выводе <h1> не начинается с новой строки. Он просто продолжается как встроенный элемент. И вы можете видеть, что у меня есть <span> в моем теге <p>, но теперь я сделал его блочным, поэтому теперь <span> создам новую строку, потому что теперь это блочный элемент.