时间戳

首页 > 解决方案 > 如何在css左侧的按钮后在右侧添加一条水平线？

css - 如何在css左侧的按钮后在右侧添加一条水平线？

问题描述

我想在右侧的这个按钮之后添加一行。谢谢你。

这是代码：

<button onClick={()=> this.onAddContact(test.name)} className="ds-fake-label">
  <svg xmlns="http://www.w3.org/2000/svg" className="arrow-add-contact" height="24" viewBox="0 0 24 24" width="24">
    <path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
  Add Contact
</button>

标签： cssreactjs

解决方案

您可以添加一个div并将其设置为

.line{
    border-bottom:1px solid black;
    width:50%;
    position:absolute;
    left:65px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

 <button
  onClick="{() => this.onAddContact(test.name)}"
  className="ds-fake-label"
 >Button</button>
 <div>
 <div class="line"></div>
 </div>
</body>
</html>

推荐阅读