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

Question

案例

我正在使用 HTML 和 CSS 尝试水平并排显示三个图像，
我正在使用无序列表来实现。

问题

前两张图排得很好，但第三张图似乎放在列表下面？

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

此外，分区 "illustrationContainer" 右边似乎有一个奇怪的边距，
即使指定了 "margin: 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>

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

XHTML & CSS: Can't seem to fit 3 images in one horizontal list?

html

css

image

margin

案例

问题

HTML