Question

我需要创建一个无序列表作为小项目的菜单。有3个类别和9个研讨会。对于每个工作坊，我想在左边放一个小图像，在右边放一个 css 圈。

我真的想尽可能正确地做，但我是初学者，所以我不确定最佳做法。

这是我的代码：

ul#menu {
  display: inline-block;
  width: 285px;
  padding-left: 0;
  border: 1px solid #000;
  border-bottom: 0;
  list-style-type: none;
}
ul#menu ul {
  padding-left: 0;
}
ul#menu > li > span {
  display: block;
  height: 35px;
  border-bottom: 1px solid #000;
  background-color: #4D4D4D;
  color: #FAFAFA;
  font-size: 18px;
  text-align: center
}
ul#menu > li:first-child {
  height: 50px;
  background-color: #E0E0E0;
  color: #050505;
}
ul#menu ul li {
  height: 35px;
  padding-left: 0;
  background-color: #007CB7;
  color: #FAFAFA;
  font-size: 14px;
  border-bottom: 1px solid #000;
}
ul#menu ul li:hover {
  background-color: #8BBDD9;
  color: #050505;
  font-weight: bold;
  list-style-type: none;
}

<ul id="menu">
  <li>
    <span>Category 1</span>
    <ul>
      <li>Workshop 1</li>
    </ul>
  </li>
  <li>
    <span>Category 2</span>
    <ul>
      <li>Workshop 2</li>
    </ul>
  </li>
  <li>
    <span>Category 3</span>
    <ul>
      <li>Workshop 3</li>
      <li>Workshop 4</li>
      <li>Workshop 5</li>
      <li>Workshop 6</li>
      <li>Workshop 7</li>
      <li>Workshop 8</li>
      <li>Workshop 9</li>
    </ul>
  </li>
</ul>

这是最好的方法吗？在我的代码中，它错过了图像和圆圈。你可以给我一些提示/建议吗？

我附上了我想要覆盖的结果的屏幕截图。My menu

非常感谢。

Answer 1

您可以使用:before和:after伪元素，将所需的样式添加到css中。此外，大多数人认为，直接ID定位更好（ul#menu - ＆gt; #menu）

＆＃13;

#menu {
display: inline-block;
width: 285px;
padding-left: 0;
border: 1px solid #000;
border-bottom: 0;
list-style-type: none;
}

#menu ul {
padding-left: 0;
}

ul#menu > li > span {
display: block;
height: 35px;
border-bottom: 1px solid #000;
background-color: #4D4D4D;
color: #FAFAFA;
font-size: 18px;
text-align: center
}

#menu > li:first-child {
height: 50px;
background-color: #E0E0E0;
color: #050505;
}

ul#menu ul li {
height: 35px;
padding-left: 0;
background-color: #007CB7;
color:#FAFAFA;
font-size: 14px;
border-bottom: 1px solid #000;
}

#menu ul li:hover {
background-color: #8BBDD9;
color: #050505;
font-weight:bold;
list-style-type: none;
}

/* ADDED */
#menu ul li:before{
  content:"";
  width:1em;
  height:1em;
  overflow:hidden;
  margin-right:0.5em;
  background: /* your image*/ red;
  display:inline-block;
}
#menu ul li:after{
  content:"•";
}

＆＃13;

<ul id="menu">
                <li>
                    <span>Category 1</span>
                    <ul>
                        <li>Workshop 1</li>
                    </ul>
                </li>
                <li>
                    <span>Category 2</span>
                    <ul>
                        <li>Workshop 2</li>
                    </ul>
                </li>
                <li>
                    <span>Category 3</span>
                    <ul>
                        <li>Workshop 3</li>
                        <li>Workshop 4</li>
                        <li>Workshop 5</li>
                        <li>Workshop 6</li>
                        <li>Workshop 7</li>
                        <li>Workshop 8</li>
                        <li>Workshop 9</li>
                    </ul>
                </li>
            </ul>

＆＃13;

Answer 2

像Pepo_rasta写的那样：你可以使用Pseudo-elements。

要获得圆圈，您可以使用border-radius。给它一个50％的值。

示例：

ul#menu li li:before {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background-color: white;
  border-radius: 50%;
  margin: 0 5px;
}

使用背景图像可以添加图像。

  background-position: right;
  background-image: url(http://placehold.it/350x150);
  background-size: 10px 10px;
  background-repeat: no-repeat;

Answer 3

您也可以使用表格。如果用背景图像替换背景颜色，它应该看起来像截图。

th{
  background-color: grey;
}

td{
  background-color: yellow;
}

#circle{
  background-color: green;
  width : 25px;
}

#pic{
  width:25px;
  background-color: blue;
}

<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<table cellspacing="0" cellpadding="0">
  <tr>
  <th colspan="3">
    category 1
  </th>
  </tr>
  <tr>
    <td id="pic"></td>
    <td>workshop1</td> 
    <td id="circle"></td>
  </tr>
  <tr>
    <th colspan="3">
    category 2
  </th>
  </tr>
  <tr>
    <td id="pic"></td>
    <td>workshop2</td> 
    <td id="circle"></td>
  </tr>
  <tr>
    <th colspan="3">
    category 2
  </th>
  </tr>
    <tr>
    <td id="pic"></td>
    <td>workshop3</td> 
    <td id="circle"></td>
  </tr>
    <tr>
    <td id="pic"></td>
    <td>workshop4</td> 
    <td id="circle"></td>
  </tr>
</table>
  </body>

</html>

Plunker

将图像和CSS圈放在列表中的最佳方法

3 个答案: