CSS - 刪除循環表單按鈕之間的空間

我有一個使用PHP循環的表單，並且試圖刪除每個提交按鈕之間的空格。出於美學原因，我希望能夠精確地設計它們之間的空間。有人能提供一些見解，我如何能做到這一點？

positionText類似乎有助於一些，我似乎無法得到顯示：沒有任何影響。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
    </head> 
<style> 
    .positionText { 
     line-height: 0%; 
     } 
</style> 
<body> 
<div class="positionText"> 
<?php 

ini_set('display_errors',1); error_reporting(E_ALL); 

$result = file_get_contents('php://input'); 

require_once 'IRCconfig.php'; 

$connection = new mysqli($db_hostname, $db_username, $db_password, $db_database); 
    if ($connection->connect_error) die($connection->connect_error); 

$DATE = empty($result) ? date('Y-m-d') : $result; 
    { 
     $query = "SELECT * FROM CLIENT_CHECKIN WHERE DATE(DATE)='$DATE' ORDER BY F_NAME ASC"; 
     $result = $connection->query($query); 

     if (!$result) die ("Database access failed: " . $connection->error); 

     $rows = $result->num_rows; 
    } 

for ($j = 0 ; $j < $rows ; ++$j) 
    { 
     $result->data_seek($j); 
     $row = $result->fetch_array(MYSQLI_NUM); 

     echo <<<_END 
     <pre> 
     <form class="clientSubmit" name="clientSubmit" action="IRCpopulatecheckin.php" method="POST"> 
     <input type="hidden" name="DATE" value="$row[0]"> 
     <input type="hidden" name="F_NAME" value="$row[1]"> 
     <input type="hidden" name="M_NAME" value="$row[2]"> 
     <input type="hidden" name="L_NAME" value="$row[3]"> 
     <input type="submit" name="dailyClient" value="$row[1] $row[2] $row[3]"> 
     </form> 
     </pre> 
_END; 
    } 

?> 
</div> 
<body> 

</html>

A sample output

來源

2014-12-05 dan5ermou5

發佈呈現的HTML輸出，而不是PHP源代碼。 – j08691 2014-12-05 18:00:37

爲什麼不直接向提交按鈕添加邊距？ – 2014-12-05 18:12:32

不確定您正在嘗試執行的操作，但嘗試在同一行上設置所有輸入。這將刪除任何空白區域。你也可以使用float來實現類似的結果。 – 2014-12-05 19:23:04

您可以使用CSS選擇提交按鈕本身。

例如：

.positionText [type="submit"]{ margin-top: -2px;}

您也可以使用

[type="hidden"]or.positionText input{}

選擇輸入如果你想樣式每個單獨提交，嘗試

.positionText [type="submit"]:nth-child(2)

您還可以使用

:first-child() and :last-child()

選擇第一個和最後提交。

希望有所幫助。

來源

2014-12-05 19:22:09

這使我走上正軌，但沒有完成工作。看到我添加的照片，輸出或多或少與調整後的邊距相同，並顯示：無。 – dan5ermou5 2014-12-05 21:39:08

您是否使用chrome，因爲chrome可能會將默認瀏覽器樣式添加到您的輸入中，這可能是您問題的原因。嘗試使用chrome開發工具檢查是否有任何樣式衝突/超馳。 – 2014-12-08 14:42:26

由於表格和pre是塊類型，您需要在CSS中放置一個margin：0。

pre,form{margin: 0}

來源

2014-12-05 19:57:32

CSS - 刪除循環表單按鈕之間的空間

回答

相關問題