Question

我在Bootstrap容器中放置了一个垂直菜单，它包含两种类型的按钮

结尾处有一个CSS三角形（放在：之后）的按钮（红色）
常规按钮放在
（绿色）

的问题：

页面的排版依赖于相对单位rem。随着视口的扩大，按钮内部的字体大小和填充也会增加。 这会导致三角形尺寸及其位置出现问题。
所有菜单项必须在右侧相互对齐。但是第一个按钮的三角形使用负边距放置，因此它重叠。

这是一个例子： http://www.bootply.com/k3dPxTZYTs#

如何解决这些问题？

HTML：

<div class="container">
    <div> 
      <a href="#" class="btn-switch">
        Lorem Ipsum 

      </a>
    </div>

  <ul>
    <a href="#"><li>Option A </li></a>
    <a href="#"><li>Option B </li></a>
    <a href="#"><li>Option C </li></a>
  </ul>

</div>

CSS（涉及响应式排版的完整CSS可以在BootPly示例中找到）：

.btn-switch {
  background: #f00;
  border-bottom: 2px solid #A00;
  padding: 0.7rem 1rem;
  margin-bottom: 10px;
  display: block;
  position: relative;
  color: #fff;
}

.btn-switch:after {
  content: "";
  width: 0px;
  height: 0px;
  border-width: 1.4rem 0px 1.4rem 1.4rem;
  border-color: transparent transparent transparent #f00;
  border-style: solid;
  position: absolute;
  top: 50%;
  right: -1.4rem;
  margin-top: -1.4rem;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
li {
  background: #0f0;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #0a0;
  color: #fff;
}

Answer 1

首先，我建议你使用box-sizin

*, *:after, *:before {
  box-sizing:border-box;
}

比你可以使用CSS计算，你可以计算元素混合百分比与其他单位的长度，在你的情况下将在百分比和rem之间

代码将是...希望这有助于你

.btn-switch {
  background: #f00;
  border-bottom: 2px solid #A00;
  padding: 0.7rem 1rem;
  margin-bottom: 10px;
  display: block;
  position: relative;
  color: #fff;
  width: calc(100% - 1.4rem);
}

.btn-switch:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  border-width: 1.4rem 0px 1.4rem 1.4rem;
  border-color: transparent transparent transparent #f00;
  border-style: solid;
  top: 0;
  bottom: 0;
  right: -1.4rem;
}

DEMO

带三角形的响应按钮

1 个答案: