1

我想渲染几个提交按钮（它们位于段落的中心，在表单的正下方），就像在这个 html 代码中一样：

span {
  background-color: #cbaa5c;
  padding: 4px;
  color: #ffffff;
  text-transform: uppercase;
}
<p style="text-align:center;">
  <span>
    <span style="border-right-width:2px; border-right-style:solid; border-right-color:#ffffff;">
      Login
    </span>
    <span>
      >
    </span>
  </span>
  &nbsp;&nbsp;&nbsp;
  <span>
    <span class='butleftspan' style="border-right-width:2px; border-right-style:solid; border-right-color:#ffffff;">
      Register
    </span>
    <span>
      >
    </span>
  </span>
</p>

上面的代码生成了这两个跨度，这是我想要实现的结果：

这是我想要达到的结果的图片！

这正是我希望两个工作按钮（而不仅仅是两个跨度）出现的方式。

我试图获得与上面定义按钮的图片和代码相同的结果，按钮内的表格，跨越世界上的一切可能，但我无法达到我的目的。任何帮助都将非常感激！提前致谢！

简单来说，我想要一个登录和一个注册按钮，该按钮与图片中的完全一样（我从上面的 HTML 代码中获得）。

4

1 回答 1

0

据我从您的问题中了解到，您想要相同的结果但使用button标签，在这种情况下，您可以使用::after插入“>”符号并使用 CSS 实现此目的：

p {
  text-align: center;
}

button {
  background: #cbaa5c;
  border: none;
  color: white;
  line-height: 2;
  padding: 0 8px;
}

button:after {
  content: ">";
  display: inline-block;
  padding-left: 8px;
  margin-left: 8px;
  border-left: 1px solid white;
}
<p>
  <button>LOGIN</button>
  <button>REGISTER</button>
</p>

于 2018-07-04T16:21:41.077 回答