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，其中包含易于中等难度的图例，后跟{{1} ul .submenu用于实际导航项目。当然不是解决这个问题的唯一方法，但绝对是比你开始时更具语义性的解决方案。显然，如果您更喜欢ul中包含的所有内容，您也可以将此CSS重新用于此目的。

＆＃13;

ul

＆＃13;

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;
}

＆＃13;

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

1 个答案: