Question

我想在用户视图中显示两个按钮作为更新按钮和取消按钮，就像一个按钮。然后，我想在两个按钮之间添加（|）。我添加了<span>标签来显示|两个按钮之间。然后，我创建了两个用于更新和删除的按钮。我尝试了很多时间但是我无法做到这一点。我怎么能这样做？请帮助我。

＆＃13;

.footer-button1{
		   background-color: #85b59d;
           width: 60px;
           margin-top: 10px;
           display: inline-block;
           text-align: center;
           height: 30px;
           border-radius: 5px;
           border: none;
           margin-bottom: 10px;
	     }

＆＃13;

<div class="btn-group">
					    <button type="button" class="btn footer-button1">Update</button>
					    <button type="button" class="btn footer-button1"> <span style="margin-left: -10px;">|</span> Delete</button>
                    </div>

＆＃13;

Answer 1

我为此使用了:after伪。如果你特别想要'|'您可以使用content代替边框。

.footer-button1{
		   background-color: #85b59d;
           width: 60px;
           margin-top: 10px;
           display: inline-block;
           text-align: center;
           height: 30px;
           border-radius: 5px;
           border: none;
           margin-bottom: 10px;
           position: relative;
           margin-right: 13px;
	     }
 
 .footer-button1:first-child:after {
  display: none;
 }
 
.footer-button1:after {
  width: 1px;
  height: 28px;
  position: absolute;
  content: '';
  top: 0;
  left: -10px;
  border-left: 1px solid #000;
}

<div class="btn-group">
					    <button type="button" class="btn footer-button1">Update</button>
					    <button type="button" class="btn footer-button1">Delete</button>
                    </div>

使用按钮组创建“更新”按钮和“取消”按钮，然后在两个按钮之间添加（|）

1 个答案: