css - 在右侧中间带有附加 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 */
}

这是 body 中的 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/> 上方