在CSS中渲染像几个跨度的按钮

Question

我想要呈现几个提交按钮（它们位于段落的中间，就在表格的正下方），与以下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代码获得的）。

Answer 1

据您所知，您希望得到相同的结果，但是使用button标签，在这种情况下，您可以使用::after插入“>”符号并使用CSS实现以下目的： / p>

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>