html & css - 在每个导航菜单项之间使用不同的图像作为分隔符

Question

我还没有看到在不同导航菜单元素之间使用不同图像的已知好方法，尽管我知道有一种方法可以使用一个图像作为一致的分隔符。

我有七个导航元素：

#menu-item-26{
}
//blue square here
#menu-item-25{
}  
//yellow square here
#menu-item-24{
}
//red square here
#menu-item-23{
}
//pink square here
#menu-item-22{
}
//green square here
#menu-item-21{
}
//purple square here
#menu-item-20{
}

我在 photoshop 中创建了 6 张图片，基本上只有 10px x 10px 的正方形，每张都有不同的颜色。我想在每组之间使用不同的图像，但我不知道它是否需要用作每个项目和填充的背景图像，或者是否有另一种响应友好的方式。

Answer 1

您有很多选择。你可以使用一个元素来放置图像，我会从 <img> 开始，除非你有充分的理由不这样做。尽管您也可以将其用作背景图像。只需使用 background-position 将其放置在元素上，并为背景图像提供一些额外的填充。

这里有几个选项。

使用元素 `<img>`

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
}

li img {
  padding: 0.25rem;
  vertical-align: middle;
}

<ul>
  <li><img src="http://placehold.it/10x10/fc0"><a href="#">One</a></li>
  <li><img src="http://placehold.it/10x10/"><a href="#">Two</a></li>
  <li><img src="http://placehold.it/10x10/fc0"><a href="#">Three</a></li>
  <li><img src="http://placehold.it/10x10/"><a href="#">Four</a></li>
  <li><img src="http://placehold.it/10x10/fc0"><a href="#">Five</a></li>
</ul>

用作背景图片

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
}

li {
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  background-position: left center;
  background-repeat: no-repeat;
}

li:nth-child(odd) {
  background-image: url( 'http://placehold.it/10x10/fc0' );
}
li:nth-child(even) {
  background-image: url( 'http://placehold.it/10x10' );
}

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
</ul>

--- 编辑 ---

看到上面评论的答案后。由于您的图像实际上是纯色，您可以使用具有背景色的元素来减少网络请求并简化应用程序的维护和灵活性。

使用元素代替图片

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li,
i {
  display: inline-block;
}

li i {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

li:nth-child(odd) i {
  background-color: gold;
}
li:nth-child(even) i {
  background-color: lightgray;
}

<ul>
  <li><i></i><a href="#">One</a></li>
  <li><i></i><a href="#">Two</a></li>
  <li><i></i><a href="#">Three</a></li>
  <li><i></i><a href="#">Four</a></li>
  <li><i></i><a href="#">Five</a></li>
</ul>

您也可以使用伪元素代替上面的实际元素。

使用伪元素代替图像

body {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline-block;
  padding: 0 0.5rem;
}

li:before {
  content: '';
  display: inline-block;
  position: relative;
  left: -0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  vertical-align: middle;
}

li:nth-child(odd):before {
  background-color: gold;
}
li:nth-child(even):before {
  background-color: lightgray;
}

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
</ul>

Answer 2

也许是这样的，使用 :before 选择器和 content:""; 样式。

.fancy-separator li {
  list-style:none;
  float:left;
  margin-left:10px;
  padding-left:10px;
}
.fancy-separator > li:first-child {
  content:none;
  margin-left: 0;
}
.fancy-separator > li:before {
  content:"";
  width:10px;
  height:10px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  left: -10px;

}
.fancy-separator > li:nth-child(2)::before {
  background: blue;
}
.fancy-separator > li:nth-child(3)::before {
  background: yellow;
}
.fancy-separator > li:nth-child(4)::before {
  background: red;
}
.fancy-separator a {
 text-decoration:none;
}

<ul class="fancy-separator">
  <li><a href="#">home</a></li>
  <li><a href="#">about</a></li>
  <li><a href="#">news</a></li>
  <li><a href="#">contact</a></li>
<ul>

html & css - 在每个导航菜单项之间使用不同的图像作为分隔符

html & css - using different image between each nav menu item as separator

html

css

nav

使用元素 `<img>`

用作背景图片

--- 编辑 ---

使用元素代替图片

使用伪元素代替图像

html & css - 在每个导航菜单项之间使用不同的图像作为分隔符

html & css - using different image between each nav menu item as separator

html

css

nav

使用元素 <img>

用作背景图片

--- 编辑 ---

使用元素代替图片

使用伪元素代替图像

使用元素 `<img>`