Left/Right float button inside div

后端 未结 2 702
臣服心动
臣服心动 2021-02-07 14:09

How can I make button float only in div area?

Here is my example CSS and HTML.

相关标签:
2条回答
  • 2021-02-07 14:31

    Change display:inline to display:inline-block

    .test {
      width:200px;
      display:inline-block;
      overflow: auto;
      white-space: nowrap;
      margin:0px auto;
      border:1px red solid;
    }
    
    0 讨论(0)
  • 2021-02-07 14:39

    You can use justify-content: space-between in .test like so:

    .test {
      display: flex;
      justify-content: space-between;
      width: 20rem;
      border: .1rem red solid;
    }
    <div class="test">
      <button>test</button>
      <button>test</button>
    </div>


    For those who want to use Bootstrap 4 can use justify-content-between:

    div {
      width: 20rem;
      border: .1rem red solid;
    }
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <div class="d-flex justify-content-between">
      <button>test</button>
      <button>test</button>
    </div>

    0 讨论(0)
提交回复
热议问题