如何将特定项目对齐到 <li>

Question

我需要将特定项目对齐到<li>。 <li> 是 <ul> 菜单的第一个子项。我有一些想法，比如做很多 <span> 并将它们对齐在一起，或者我可以将我的 <li> 区域分成 3 个部分，并将我的项目与其他项目对齐，但我不知道哪种方式最实用且最符合语义正确的。

这是我的代码：

<ul id="menuWorkshops">
  <li>
    <span>Easy</span>
    <span>Middle</span>
    <span>Difficult</span>
    <span class="circle green"></span>
    <span class="circle orange"></span>
    <span class="circle red"></span>
  </li>
  <li>
    <span>Hardware</span>
    <ul>
      <li>
        <img alt="" src="img/hardware_web.png" /> Montage PC
        <span class="circleMenu orange"></span>
      </li>
    </ul>
  </li>
  <li>
    <span>Système</span>
    <ul>
      <li>
        <img alt="" src="img/os_web.png" /> Installation OS
        <span class="circleMenu green"></span>
      </li>
    </ul>
  </li>
  <li>
    <span>Programmation</span>
    <ul>
      <li>
        <img alt="" src="img/html_web.png" /> Développement Web
        <span class="circleMenu orange"></span>
      </li>
      <li>
        <img alt="" src="img/lego_web.png" /> Lego Mindstorm
        <span class="circleMenu green"></span>
      </li>
      <li>
        <img alt="" src="img/catch_me_web.png" /> Jeu Attrape-moi (Processing)
        <span class="circleMenu red"></span>
      </li>
      <li>
        <img alt="" src="img/tetris_web.png" /> Jeu Tetris (Small Basic)
        <span class="circleMenu red"></span>
      </li>
      <li>
        <img alt="" src="img/breakout_web.png" /> Jeu Casse-Brique (Small Basic)
        <span class="circleMenu orange"></span>
      </li>
      <li>
        <img alt="" src="img/scratch_web.png" /> Kinect to Scratch
        <span class="circleMenu green"></span>
      </li>
      <li>
        <img alt="" src="img/bird_web.png" /> Jeu Flappy Bird (Scratch)
        <span class="circleMenu green"></span>
      </li>
    </ul>
  </li>
</ul>

ul#menuWorkshops {
  display: inline-block;
  width: 285px;
  padding-left: 0;
  border: 1px solid #000;
  border-bottom: 0;
  list-style-type: none;
}

ul#menuWorkshops ul {
  padding-left: 0;
}

ul#menuWorkshops > li > span {
  display: block;
  height: 35px;
  border-bottom: 1px solid #000;
  background-color: #4D4D4D;
  color: #FAFAFA;
  font-size: 18px;
  text-align: center;
  line-height: 35px;
}

ul#menuWorkshops > li:first-child {
  height: 50px;
  background-color: #E0E0E0;
  color: #050505;
}

ul#menuWorkshops ul li {
  height: 35px;
  line-height: 35px;
  padding: 5px 10px;
  background-color: #007CB7;
  color: #FAFAFA;
  font-size: 14px;
  border-bottom: 1px solid #000;
}

ul#menuWorkshops img {
  vertical-align: middle;
}

ul#menuWorkshops ul li:hover {
  background-color: #8BBDD9;
  color: #050505;
  font-weight: bold;
  list-style-type: none;
}

span.circleMenu {
  float: right;
  width: 10px;
  height: 10px;
  border: 1px solid #FFF;
  border-radius: 5px;
}

.green {
  background-color: #008000;
}

.orange {
  background-color: #FFA500;
}

.red {
  background-color: #F00;
}

为了让您理解我的问题，我将加入我想要达到的结果的屏幕截图。

我的截图

Answer 1

我会将顶部部分与随后的导航分开，因为它不是任何真正意义上的同级列表项。在这里，我为整个菜单创建了一个nav，其中包含header 和一系列dl，用于轻松中等难度的图例，然后是ul 和.submenu uls对于实际的导航项目。当然不是解决这个问题的唯一方法，但绝对是比你开始的更语义化的解决方案。显然，如果您更喜欢包含在 ul 中的所有内容，您也可以将此 CSS 重新用于此目的。

body {
  box-sizing: border-box;
  font-family: sans-serif;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
#menuWorkshops {
  border: 1px solid #000;
  display: inline-block;
  width: 325px;
}
#menuWorkshops dl,
#menuWorkshops dt,
#menuWorkshops dd,
#menuWorkshops ul,
#menuWorkshops li {
  margin: 0;
  padding: 0;
}
#menuWorkshops header {
  background-color: #E0E0E0;
  color: #050505;
  padding: 12px 10px;
}
#menuWorkshops header dl {
  display: inline-block;
  font-size: 14px;
  width: 32%;
}
#menuWorkshops header dl,
#menuWorkshops header dt,
#menuWorkshops header dd {
  margin: 0;
  text-align: center;
}
#menuWorkshops header dt,
#menuWorkshops header dd {
  display: block;
}
#menuWorkshops header .circle {
  margin: 4px auto 0;
}
.circle {
  border: 1px solid #FFF;
  border-radius: 50%;
  display: inline-block;
  height: 20px;
  width: 20px;
}
.green {
  background-color: #008000;
}
.orange {
  background-color: #FFA500;
}
.red {
  background-color: #F00;
}
#menuWorkshops ul,
#menuWorkshops li {
  display: block;
  padding-left: 0;
}
#menuWorkshops li {
  color: #FAFAFA;
  line-height: 50px;
}
#menuWorkshops > ul > li {
  background-color: #4D4D4D;
  border-top: 1px solid #000;
  font-size: 18px;
  text-align: center;
}
#menuWorkshops .submenu li {
  border-top: 1px solid #000;
}
#menuWorkshops .submenu a {
  background-color: #007CB7;
  color: #FAFAFA;
  display: block;
  font-size: 14px;
  padding: 0 10px;
  text-align: left;
  text-decoration: none;
}
#menuWorkshops .submenu a:hover {
  background-color: #8BBDD9;
  color: #050505;
  font-weight: bold;
  list-style-type: none;
}
#menuWorkshops .submenu img {
  display: inline-block;
  height: 40px;
  padding: 0 10px;
  vertical-align: middle;
  width: 40px;
}
#menuWorkshops .submenu .circle {
  float: right;
  margin-top: 12px;
}

<nav id="menuWorkshops">
  <header>
    <dl>
      <dt>Facile</dt>
      <dd class="circle green"></dd>
    </dl>
    <dl>
      <dt>Moyen</dt>
      <dd class="circle orange"></dd>
    </dl>
    <dl>
      <dt>Difficile</dt>
      <dd class="circle red"></dd>
    </dl>
  </header>
  <ul>
    <li>Hardware
      <ul class="submenu">
        <li>
          <a href="#">
            <img alt="" src="img/hardware_web.png" />Montage PC
            <span class="circle orange"></span>
          </a>
        </li>
      </ul>
    </li>
    <li>Système
      <ul class="submenu">
        <li>
          <a href="#">
            <img alt="" src="img/os_web.png" />Installation OS
            <span class="circle green"></span>
          </a>
        </li>
      </ul>
    </li>
    <li>Programmation
      <ul class="submenu">
        <li>
          <a href="#">
            <img alt="" src="img/html_web.png" />Développement Web
            <span class="circle orange"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/lego_web.png" />Lego Mindstorm
            <span class="circle green"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/catch_me_web.png" />Jeu Attrape-moi (Processing)
            <span class="circle red"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/tetris_web.png" />Jeu Tetris (Small Basic)
            <span class="circle red"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/breakout_web.png" />Jeu Casse-Brique (Small Basic)
            <span class="circle orange"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/scratch_web.png" />Kinect to Scratch
            <span class="circle green"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <img alt="" src="img/bird_web.png" />Jeu Flappy Bird (Scratch)
            <span class="circle green"></span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>