CODEWITHSUNDEEP
htmlcsscross-browser
Matoeil
Matoeil

Reputation: 7289

li:marker and text not on same line on firefox

How to make this item list text with li:marker appearing on same line.

By default on firefox, the navigator does not seem to align the text and the list style.

<div id="block-views-articles-block-1" class="block block-views contextual-links-region clearfix">
      <h2 class="title">A la une</h2>
      <div class="content">
        <div
          class="view view-articles view-id-articles view-display-id-block_1 view-dom-id-0e5a7d89bbc6fd4dcdd56c23e9932434">
          <div class="view-content">
            <div class="item-list">
              <ul>
                <li class="views-row views-row-1 views-row-odd views-row-first">
                  <a href="/fr/5e-edition-du-prix-departemental-recherche-provence-2021">
                    <div class="description"></div>
                    <div class="h2-like title">5e édition du Prix Départemental de la Recherche en Provence 2021</div>
                    <div class="picture"></div>
                  </a>
                </li>
                <li class="views-row views-row-2 views-row-even"><a
                  href="/fr/pouvoir-caresses-emission-arte-rochelle-ackerley-chercheuse-lequipe-corps-multisensorialite">
                  <div class="picture">
                  </div>
                  <div class="h2-like title">Le pouvoir des caresses : une émission sur ARTE avec Rochelle Ackerley,
                    chercheuse de l'Equipe Corps et Multisensorialité
                    <div/>
                    <div class="description"></div>
                </a>
                </li>
                <li class="views-row views-row-3 views-row-odd views-row-last"><a href="/fr/yearbook-2019-carnot-cognition">
                  <div class="picture"></div>
                  <div class="h2-like title">Yearbook 2019 Carnot Cognition</div>
                  <div class="description"></div>
                </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

https://codepen.io/matoeil/pen/abpmerO

Upvotes: 1

Views: 2055

Answers (1)

Matoeil
Matoeil

Reputation: 7289

thanks to @CBroe, the a needs a display block but also the ul must be having an outside list style position to work

a {
  display: block;
}

ul {
  list-style-position: outside;
}

Upvotes: 3

Related Questions