Inline input and button-CodePudding

Please, how can I inline a button and an input field without using <form>? I'm trying this way but it's not working.

.inline-button .inline-input{
    vertical-align:middle;
}

<div >
  <div >
    <div >
      <label for="contractNumID" >Contract Number</label>
      <input type="text" readonly id="contractNumID"  mid="staticContract" value="Contract Number"/>
    </div>
    <div >
      <label for="contractNumber" >Contract</label>
      <input type="text"  id="contractNumber"/>
    </div>
    <div  data-inline="true">
      <button type="" >
        Populate
      </button>
    </div>
  </div>
</div>

CodePudding user response：

I changed the form to a div and removed the additional CSS. I've also included the Bootstrap library because it appears that's what you're using.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <label for="contractNumID" >Contract Number</label>
    <input type="text" readonly id="contractNumID"  mid="staticContract" value="Contract Number" />
  </div>
  <div >
    <label for="contractNumber" >Contract</label>
    <input type="text"  id="contractNumber" />
  </div>
  <button type="" >Populate</button>
</div>

CodePudding user response：

you can use

.col-md-2 > div {
  display: inline;
}

<div >
  <div >
    <div >
      <label for="contractNumID" >Contract Number</label>
      <input type="text" readonly id="contractNumID"  mid="staticContract" value="Contract Number"/>
    </div>
    <div >
      <label for="contractNumber" >Contract</label>
      <input type="text"  id="contractNumber"/>
    </div>
    <div  data-inline="true">
      <button type="" >
        Populate
      </button>
    </div>
  </div>
</div>