2016-01-12 2 views
1

Как удалить разрыв строки между двумя тегами <input>, чтобы две кнопки отображались на одной строке?Как удалить разрыв строки между двумя тегами <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> 

ответ

0

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>

2

The <input> и <button> элементов инлайн (встроенный блок) Уровень по умолчанию - MDN, поэтому они должны быть выровнены рядом друг с другом, и нет <br> между их в фрагменте кода.

Насколько я знаю, проблема в том, что проблема заключается в том, что width:1% на контейнере <td>, что делает его недостаточным для увеличения кнопок. Ответ прост: увеличить ширина контейнера. Хотя, вы также можете использовать white-space: nowrap;, если это необходимо.

Сторона Примечание, ID должен быть уникальным на странице. Вы используете id=btnEdit и id=btnDel несколько раз там, это, вероятно, вызовет проблемы позже, поэтому лучше исправить это тоже.