XHTML 和 CSS：似乎无法在一个水平列表中容纳 3 个图像？

Question

案例

我正在使用 HTML 和 CSS 来尝试水平显示三个彼此相邻的图像，
我正在使用无序列表来实现。

问题

前两个图像排列得很好，但第三个图像似乎放在列表下方？

以下是检查文档时的问题演示。
li#illustrationItem3 应该排在第 3 位，位于 Image 2 之后。 illustrationItem3 出现在一个不好的地方。

---

另外，“illustrationContainer”这个部分在右边似乎有一个奇怪的边距，
即使“边距：0px;”被指定。 illustrationContainer 的右侧似乎有一个奇怪的边距。

---

HTML

div#illustrationContainer {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  height: 100px;
  width: 780px;
  border-radius: 25px;
  background-color: 000000;
}
div#illustrationList {
  position: relative;
  margin: 10px;
  padding: 0px;
  height: 80px;
  width: 760px;
  list-style-type: none;
}
li#illustrationItem1 {
  position: relative;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  height: 80px;
  width: 260px;
}
li#illustrationItem2 {
  position: relative;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: -25px;
  height: 80px;
  width: 260px;
}
li#illustrationItem3 {
  position: relative;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: -25px;
  height: 80px;
  width: 260px;
}
img#illustrationPiece1 {
  position: absolute;
  display: inline;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  height: 80px;
  width: 260px;
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  content: url("/png/illustrationpieces/image_01.png");
}
img#illustrationPiece2 {
  position: absolute;
  display: inline;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  height: 80px;
  width: 260px;
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  content: url("/png/illustrationpieces/image_02.png");
}
img#illustrationPiece3 {
  position: absolute;
  display: inline;
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  height: 80px;
  width: 260px;
  -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  content: url("/png/illustrationpieces/image_03.png");
}

<div id="illustrationContainer">
  <ul id="illustrationList">
    <li id="illustrationItem1">
      <img id="illustrationPiece1" />
    </li>
    <li id="illustrationItem2">
      <img id="illustrationPiece2" />
    </li>
    <li id="illustrationItem3">
      <img id="illustrationPiece3" />
    </li>
  </ul>
</div>

提前；感谢您的回复。

Answer 1

好的 - 我进行了一些更改以提高您的代码效率，并在此处回答了您的问题。最好的方法是查看我如何更改您的代码并将其与您的代码进行比较。

这是DEMO

#illustrationContainer {
  height: 100px;
  width: 780px;
  border-radius: 25px;
  background-color: #000000;
}

#illustrationList {
  margin: 10px;
  padding: 0;
  height: calc(100% - 20px); /* 80px */
  width: 760px;
  list-style-type: none;
  float: left;
}

#illustrationItem1,
#illustrationItem2,
#illustrationItem3 {
  width: calc(100% / 3);
  height: 100%;
  margin: 0;
  padding: 0;
  float: left;
}

#illustrationItem1 {
  background: red; /* Take out background */
}

#illustrationItem2 {
  background: blue; /* Take out background */
}

#illustrationItem3 {
  background: green; /* Take out background */
}

#illustrationPiece1,
#illustionPiece2,
#illustionPiece3 {
  width: 100%;
  height: 100%;
  float: left;
}

#illustrationPiece1 {
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  background-image: url("/png/illustrationpieces/image_01.png");
}

#illustrationPiece2 {
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  background-image: url("/png/illustrationpieces/image_02.png");
}

#illustrationPiece3 {
  -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  background-image: url("/png/illustrationpieces/image_03.png");
}

<div id="illustrationContainer">
  <ul id="illustrationList">
    <li id="illustrationItem1">
      <div id="illustrationPiece1"></div>
    </li>
    <li id="illustrationItem2">
      <div id="illustrationPiece2"></div>
    </li>
    <li id="illustrationItem3">
      <div id="illustrationPiece3"></div>
    </li>
  </ul>
</div>