HTML <Input>按鈕意外移動到下一行

我有一個頁面，顯示搜索結果並在每個結果旁放一個按鈕。然而，結果如圖1所示，其中文本下方有按鈕，當我想讓圖2中的按鈕與文本一致時。這是爲什麼發生？HTML <Input>按鈕意外移動到下一行

enter image description here

HTML

<?php 
while($row = mysql_fetch_array($sqlresult)) 
{ 
echo $row['personName']; 
?> 
<form action="http://website/delPerson.php" method="post"> 
<input type="submit" name="delete" value="Delete" class="deleteButton"> 
</form> 
<br> 
<?php 
} 
?>

來源

2014-01-22 RGriffiths

你有這個包含任何元素？也許他的寬度太小 –

我不是UI專家，但我會開始通過在div中包裝標籤/按鈕 – Liath

沒有div但寬度絕對足夠 - 謝謝 – RGriffiths

您正在使用form圍繞input標籤，顯然它必須像這是一個塊級元素，所以你需要使用

form { 
    display: inline-block; 
}

這將保留您的form的block行爲爲好，但會內聯。

而且，我已經使用了選擇器是一般的元素選擇，所以一定要指定一個class您form元素一樣，我所提供的選擇將使所有的form到inline-block

所以會像

form.class_name { 
    display: inline-block; 
}

Demo

來源

2014-01-22 08:48:27

Spot on - thanks – RGriffiths

添加display:inline到您的窗體：

form{ 
    display:inline; 
}

來源

2014-01-22 08:47:55

嘗試使用CSS

whitespace: no-wrap;

關於類deleteButton的

。

但我認爲最好的辦法是先前建議CSS

display: inline-block;

來源

2014-01-22 08:48:11 dansv130

<?php 
    while($row = mysql_fetch_array($sqlresult)) 
    { 
?> 

     <form action="http://website/delPerson.php" method="post"> 
     <label> <?php echo $row['personName']; ?></label><input type="submit" name="delete" value="Delete" class="deleteButton"></td></tr> 
     </form> 


    <br> 
    <?php 
    } 
    ?> 

try this

來源

2014-01-22 08:48:31

嘗試這樣

<?php while($row = mysql_fetch_array($sqlresult)) {?> 
<form action="http://website/delPerson.php" method="post"> 
<?php echo $row['personName'];?> 
<input type="submit" name="delete" value="Delete" class="deleteButton"> 
    </form> 
<br> 
<?php } ?>

來源

2014-01-22 08:48:50

HTML <Input>按鈕意外移動到下一行

回答

相關問題