水平 ul 列表中的神秘左侧填充

Question

I have made a horizontal unordered list that works great except for the fact that there is some left padding. I'd like the UL to be flush against its' container and not have any padding.

I've tried margin-left: 0 but no joy.

Can anyone see or think of a way to get my markup to be flush left?

Here's the CSS

ul.speakerclass > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
    width:180px;
    zoom:1;
    *display:inline;
    /* this fix is needed for IE7- */
}

.speakercard {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 180px;
  margin: auto;
  text-align: center;
  padding-top: 14px;
}

button.speakerclass {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px;
  color: white;
  background-color: #393939;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

a.speakerclass {
  text-decoration: none;
  color: black;
}

button.speakerclass:hover, a:hover {
  opacity: 0.7;
}

.speaker-box {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  border:1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
}

.speaker-pic {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

And the HTML

  <ul class="speakerclass">
      <li>
        <div class="speakercard">
          <div class="speaker-box">
            <img src="./img.jpeg" class="speaker-pic" alt="" style="width:100%">
          </div>
          <p>1 Psoo Doe</p>
          <p><button class="speakerclass">Speaker Profile</button></p>
        </div>
      </li>

      <li>
        <div class="speakercard">
          <div class="speaker-box">
            <img src="./img.jpeg" class="speaker-pic" alt="" style="width:100%">
          </div>
          <p>2 Doe</p>
          <p><button>Speaker Profile</button></p>
        </div>
      </li>

      <li>
        <div class="speakercard">
          <div class="speaker-box">
            <img src="./img.jpeg" class="speaker-pic" alt="" style="width:100%">
          </div>
          <p>3 Doe</p>
          <p><button>Speaker Profile</button></p>
        </div>
      </li>
  </ul>

Thanks for all help

Answer 1

Add this:

ul.speakerclass {
    padding: 0;
}

Answer 2

Setting padding-left: 0 for the ul.speakerclass container removed the space.

According to W3C Standard , <ul> elements by default have a padding-inline-start: 40px . This accounted for the 40px of left padding.

 ul.speakerclass { padding-left: 0; } ul.speakerclass > li { display: inline-block; /* You can also add some margins here to make it look prettier */ width:180px; zoom:1; *display:inline; /* this fix is needed for IE7- */ }.speakercard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); max-width: 180px; margin: auto; text-align: center; padding-top: 14px; } button.speakerclass { border: none; outline: 0; display: inline-block; padding: 10px; color: white; background-color: #393939; text-align: center; cursor: pointer; width: 100%; } a.speakerclass { text-decoration: none; color: black; } button.speakerclass:hover, a:hover { opacity: 0.7; }.speaker-box { width: 100px; height: 100px; position: relative; overflow: hidden; border-radius: 50%; border:1px solid #ccc; margin-left: auto; margin-right: auto; }.speaker-pic { display: inline; margin: 0 auto; height: 100%; width: auto; }

 <ul class="speakerclass"> <li> <div class="speakercard"> <div class="speaker-box"> <img src="./img.jpeg" class="speaker-pic" alt="" style="width:100%"> </div> <p>1 Psoo Doe</p> <p><button class="speakerclass">Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="speaker-box"> <img src="./img.jpeg" class="speaker-pic" alt="" style="width:100%"> </div> <p>2 Doe</p> <p><button>Speaker Profile</button></p> </div> </li> <li> <div class="speakercard"> <div class="speaker-box"> <img src="./img.jpeg" class="speaker-pic" alt="" style="width:100%"> </div> <p>3 Doe</p> <p><button>Speaker Profile</button></p> </div> </li> </ul>