ダウンロードとinput fileの間に縦の区切り線を入れたい

Question

タイトル通りなんですが、ダウンロードボタンとiuput fileの間に区切り線を入れ痛いのですがかこっているボーダーとつなげるかんじでやりたいのですがここからどうすればいいでしょうか？

<div class="dl_label">
      <label for="">ダウンロード/アップロード:</label>
    </div>

    <div class="form-inline" style="border: 1px solid #E6E6E6; padding: 20px; border-radius: 10px;">
      <button type="button" class="btn btn-primary" style="margin-right: 10px;">ダウンロード</button>
      <input type="file" style="display:none">

      <div class="input-group">
        <input type="text" id="photoCover" class="form-control" placeholder="select file">
        <span class="input-group-btn"><button type="button" class="btn btn-warning" style="color: #fff;">キャンセル</button></span>
        <span class="input-group-btn"><button type="button" class="btn btn-info">ファイル選択</button></span>
      </div>
      <button type="button" class="btn btn-primary" style="margin-left: 20px;">アップロード</button>

    </div>
コード

どうかよろしくお願いします。

Comments

[x_x]

CSSではなくHTMLが提示されているようです。

Answer 1

区切り線を入れるのは <hr> タグで良いですかね。

で、それだと囲っているボーダーに padding:20px が指定されているので、そのままだとくっつきません。

<hr> の左右に -20px のネガティブマージンを入れれば良いかなと思います。