Question

需要制作一个汉堡包项目，每行比最后一行短。

E.g。

------
 -----
  ----

我的想法就是让里面有3个跨度的div。

<label for="menu_collapse_icon" class="menu_collapse_icon_label">
    <span class="menu_bar"></span>
    <span class="menu_bar"></span>
    <span class="menu_bar"></span>
</label>

然后在CSS中例如：

.menu_collapse_icon {
    FOR EACH SPAN, REDUCE ITS LENGTH BY X AMOUNT?
}

但我不知道该怎么做？我可以创建3个单独的长度条，但宁愿这样做。

Answer 1

将每个元素添加到彼此内部以创建级联：

.menu_bar {
  padding-top: 10px;
  width: 80%;
  display: inline-block;
  border-top: 1px solid #454545;
  box-sizing: border-box;
}
.menu_collapse_icon_label {
  width: 40px;
  display: inline-block;
  text-align: right;
  font-size: 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 10px 10px 0 0;
}

<label for="menu_collapse_icon" class="menu_collapse_icon_label">
  <div class="menu_bar">
    <div class="menu_bar">
      <div class="menu_bar"></div>
    </div>
  </div>
</label>

Answer 2

使用您计划拥有的标记，单个选择器无法实现。如果你搜索，我相信你会找到很多例子。

然而，我只是为了通过一个选择器来完成它。您将需要嵌套元素。

label {
    display: block; text-align: right;
    border: 1px solid #bbb; 
    width: 32px; height: 32px;
    padding: 4px 8px 4px 0px;
}
label span {
    display: block; float: right; position: relative;
    width: 75%; right: 0px; top: 8px; 
    border-bottom: 2px solid #999;
}
label > span { margin-top: -4px; }

<label for="menu_collapse_icon" class="menu_collapse_icon_label">
    <span class="menu_bar">
        <span class="menu_bar">
            <span class="menu_bar"></span>
        </span>    
    </span>   
</label>

Answer 3

我假设你可以做类似下面的事情。如果使用i和伪元素的百分比，则可能会使其响应。

label {
    display: block;
    border: 1px solid #ccc; 
    width: 48px;
    height: 48px;
    position: relative;
}

i {
    display: block;
    background: #999;
    height: 2px;
    width: 50%;
    
    position: absolute;
    top: 50%;
    margin-top: -1px;
    right: 4px;
}
i::before, i::after {
    right: 0;
    position: absolute;
    height: 2px;
    background: #999;
    content: "";
}
i::before {
    width: 120%;
    top: -8px;
}
i::after {
    width: 80%;
    bottom: -8px;
}

<label for="menu_collapse_icon" class="menu_collapse_icon_label">
    <i class="menu-icon"></i>
</label>

然而，我不鼓励它。您最好创建一个看起来像这样的（SVG）图标，并将其用于内联。

我设法让它变得快速响应，这很有趣。但是，我鼓励你去看看图标。这是the responsive show case的链接。

重要的CSS：

i {
    display: block;
    background: #999;
    height: 4%;
    width: 50%;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12%;
}
i::before, i::after {
    right: 0;
    position: absolute;
    height: 100%;
    background: #999;
    content: "";
}
i::before {
    width: 125%;
    top: -400%;
}
i::after {
    width: 75%;
    bottom: -400%;
}

使用缩短线创建汉堡菜单

3 个答案: