CODEWITHSUNDEEP
htmlcsslist
Setari M
Setari M

Reputation: 31

How do I line up list bullets in CSS?

So these bullets I have in this list are uneven and I want them to be even. I came across the answer some time ago but I could not find it for the life of me now. Any help is appreciated.

#div1 {
  border: black;
  border-style: inset;
  margin-top: 5em;
  text-align: center;
}

.div2 {
  border: blue;
  border-style: inset;
  height: 100%;
}

#salty {
  display: block;
  transform: rotate(90deg);
  width: 45em;
  height: 50em;
  margin-left: auto;
  margin-right: auto;
}

ul {
  list-style-position: inside;
  padding-left: 0;
  margin: 10px;
}
<div class="container">

  <div class="row">

    <div class="col-md-1"></div>

    <div class="col-md-10" id="div1">
      <p id="p1">
        <h1>My Cat Salty</h1>
      </p>
      <p id="p2">
        <h2>Salty is a floofball</h2>
      </p>

      <div class="div2"><img src="babysalty.jpg" id="salty" />
        <p id="p3"> This is my cat, Salty. </p>
      </div>

      <div class="div3">
        <ul>
          <li>Salty is a cat.</li>
          <li>This is a list item.</li>
          <li>This is a list item.</li>
          <li>Salty is fluffy.</li>
          <li>This is a list item.</li>
          <li>This is a list item.</li>
          <li>Salty also has a fluffy tail.</li>
          <li>This is a list item.</li>
</ul>
      </div>

    </div>
    <div class="col-md-1"></div>
  </div>
</div>

And for some reason I can't get my CSS to display in the post so it's in the JSFiddle.

https://jsfiddle.net/dus0tLyt/4/

Upvotes: 2

Views: 3310

Answers (2)

Van Tran
Van Tran

Reputation: 96

First, you need to close your <ul> tag using </ul>.

The reason your <li> is not even is that the styling for <ul> is text-align: center;. Try to change it to text-align: left;

For my guess, you may want to center the <ul>, so I style a bit more to make <ul> center.

#div1 {
  border: black;
  border-style: inset;
  margin-top: 5em;
  text-align: center;
}

.div2 {
  border: blue;
  border-style: inset;
  height: 100%;
}

#salty {
  display: block;
  transform: rotate(90deg);
  width: 45em;
  height: 50em;
  margin-left: auto;
  margin-right: auto;
}

ul {
  list-style-position: inside;
  padding-left: 0;
  margin: 10px;
  text-align: left;
  max-width: 35%;
  margin: auto;
}
<div class="container">

  <div class="row">

    <div class="col-md-1"></div>

    <div class="col-md-10" id="div1">
      <p id="p1">
        <h1>My Cat Salty</h1>
      </p>
      <p id="p2">
        <h2>Salty is a floofball</h2>
      </p>

      <div class="div2"><img src="babysalty.jpg" id="salty" />
        <p id="p3"> This is my cat, Salty. </p>
      </div>

      <div class="div3">
        <ul>
          <li>Salty is a cat.</li>
          <li>This is a list item.</li>
          <li>This is a list item.</li>
          <li>Salty is fluffy.</li>
          <li>This is a list item.</li>
          <li>This is a list item.</li>
          <li>Salty also has a fluffy tail.</li>
          <li>This is a list item.</li>
        </ul>
      </div>

    </div>
    <div class="col-md-1"></div>
  </div>
</div>

Upvotes: 1

connexo
connexo

Reputation: 56720

Make the ul an inline-block and text-align the list items left.

.div3 {
  text-align: center;
}

.div3 ul {
  display: inline-block;
}

.div3 ul li {
  text-align: left;
}
<div class="div3">
  <ul>
    <li>Salty is a cat.</li>
    <li>This is a list item.</li>
    <li>This is a list item.</li>
    <li>Salty is fluffy.</li>
    <li>This is a list item.</li>
    <li>This is a list item.</li>
    <li>Salty also has a fluffy tail.</li>
    <li>This is a list item.</li>
  </ul>
</div>

Upvotes: 3

Related Questions