Question

如何删除两个<input>标记之间的换行符，以便两个按钮显示在同一行？

<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>

Answer 1

<input>和<button>元素默认为内联（内联块）级别 - MDN，因此它们应该彼此相邻对齐，并且没有{{1在你的代码片段中它们之间。

到目前为止，我发现问题很可能是容器<br>上的width:1%，这使得它没有足够的空间让按钮增长。答案很简单：增加容器的宽度。但是，如果需要，您也可以使用<td>。

旁注， ID 在页面上必须是唯一的。你在那里多次使用white-space: nowrap;和id=btnEdit，这可能会在以后造成麻烦，所以最好也解决这个问题。

Answer 2

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>

如何删除两个<input />标记之间的换行符？

2 个答案: