在右侧中间附加hr的Div

Question

我对css设计太周了，我正在尝试设计一个与附加图像相似的要求

这是我的CSS样式

<style>
.round{
    border-bottom-right-radius:5px;
    border-top-right-radius:5px;
}

hr {
    margin-top:10px;

    border: none;
    height: 1px;
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

这里是身体中的div

<div class="container">
  <div>
      <div class="round col-md-2" style="border: 2px solid; float:left;">
        English
      </div>
        <hr/>
  </div>
</div>

凭借我的代码，我相信我达到了近60％。这是我的代码的输出

有人可以指导我解决问题 提前谢谢。

Answer 1

请参阅this bootply

我在您的文本框中添加了transform: translateY(-50%);，将其向上移动到<hr/>