CODEWITHSUNDEEP
htmlcss
Phill Greggan
Phill Greggan

Reputation: 2394

How do I remove the line break between two <input> tags?

How do I remove the line break between two <input> tags so that two buttons will display on the same line?

<td colspan="1" style="width:1%;padding-left:50px;">
    <div style="display:inline-block">
        <input type="submit" name="btnEdit" id="btnEdit" class="btn btn-success" style="width:50px;" value="Edit" />
        <input type="submit" name="btnEdit" id="btnDel" class="btn btn-success" style="width:50px;" value="Del" />
        @*<button type="submit" name="btnEdit" id="btnEdit" class="btn btn-success" style="width:50px;">Edit</button>
        <button type="submit" name="btnDel" id="btnDel" class="btn btn-danger" style="width:50px;">Del</button>*@
    </div>
</td>

Upvotes: 2

Views: 3105

Answers (2)

Stickers
Stickers

Reputation: 78676

The <input> and <button> elements are inline (inline-block) level by default - MDN, so they should be aligned next to each other, and there is no <br> between them in your code snippet.

As far I as see the problem is likely to be the width:1% on the container <td>, which makes it to not have enough room for the buttons to grow. The answer is simple: increase the container's width. Although, you can also use white-space: nowrap; if necessary.

Side note, ID must be unique on a page. You use id=btnEdit and id=btnDel multiple times there, it's likely to cause trouble later, so better to fix that too.

Upvotes: 2

AmJustSam
AmJustSam

Reputation: 268

div{
  display:inline-block
}

input,button {
  width: 30px;
  height: 30px;
  background-color: #aaa;
  color: white;
  border: none;
}
 <td colspan="1" style="width:1%;padding-left:50px;">
        <div>
            <input  type="submit" name="btnEdit" id="btnEdit" class="btn btn-success" style="width:50px;" value="Edit" />
            <input  type="submit" name="btnEdit" id="btnDel" class="btn btn-success" style="width:50px;" value="Del" />
        <button type="submit" name="btnEdit" id="btnEdit" class="btn btn-success" style="width:50px;">Edit</button>
        <button type="submit" name="btnDel"  id="btnDel" class="btn btn-danger" style="width:50px;">Del</button>
        </div>
    </td>

Upvotes: 0

Related Questions