Div 在其右侧中间附有 hr

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/>

Div 在其右侧中间附有 hr

Div with attached hr on its right side middle

css

twitter-bootstrap-3