Как эта ссылка может охватывать текст, а не горизонтальную длину документа?

Я хочу, чтобы «Предстоящие шоу» были ссылкой на внешний сайт, но ссылка охватывает весь блок — ширину страницы.

Каков самый простой способ, чтобы он просто охватывал текст?

<div class="content">
      <a href="https://www.songkick.com/artists/8458448-exlegionnaires/calendar" target="_blank"><h1>Upcoming Shows</h1></a>
      <ul>
        <li> 7/23 Spider House Ballroom (ATX) w/Honey and Salt, Holy Smokes</li>
        <li> 7/30 Cheer Up Charlies (ATX) w/Killer Ghost</li>
        <li> 8/9 Hotel Vegas (ATX) w/Golden Boys, Party Dress, TBD</li>
        <li> 8/22 Hole in The Wall (ATX) w/Hex Dispensers, Popper Burns</li>
        <li> 9/13 Swan Dive (ATX) w/Rare Birds, Soaked</li>
      </ul>

html
person D. A. Anguiano Jr    schedule 01.07.2015    source источник
comment
Элементы <h1> являются элементами уровня блока и по умолчанию занимают всю ширину своего родительского контейнера. Может быть, вы предпочитаете использовать <span>?   -  person j08691    schedule 01.07.2015

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете использовать css, чтобы он отображался как блок с настроенной шириной (или со 100%, если вы указали блок выше):

a {
    display: block;
    width: 200px;
}

Или вы можете вставить этот css в свой тег html:

<a style="display: block">
person kasiacode    schedule 01.07.2015

arrow_upward
0
arrow_downward

Используйте display:inline-block в css, поэтому:

h1{
    display:inline-block
    //rest of css stylings...
}

См. также: css h1 - ширина только текста

person LeDoc    schedule 01.07.2015

arrow_upward
0
arrow_downward

Вам просто нужно поставить display: inline;
Вот рабочая скрипка:

h1 {
    display:inline;
}
<div class="content"> <a href="https://www.songkick.com/artists/8458448-exlegionnaires/calendar" target="_blank"><h1>Upcoming Shows</h1></a>

    <ul>
        <li>7/23 Spider House Ballroom (ATX) w/Honey and Salt, Holy Smokes</li>
        <li>7/30 Cheer Up Charlies (ATX) w/Killer Ghost</li>
        <li>8/9 Hotel Vegas (ATX) w/Golden Boys, Party Dress, TBD</li>
        <li>8/22 Hole in The Wall (ATX) w/Hex Dispensers, Popper Burns</li>
        <li>9/13 Swan Dive (ATX) w/Rare Birds, Soaked</li>
    </ul>

person aleksandar    schedule 01.07.2015