CSS - 删除循环表单按钮之间的空间答案

【问题标题】：CSS - removing space between looped form buttonsCSS - 删除循环表单按钮之间的空间
【发布时间】：2014-12-05 17:59:18
【问题描述】：

*已编辑以包含屏幕截图

我有一个使用 PHP 循环的表单，并试图删除每个提交按钮之间的空格。出于美学原因，我希望能够准确地设计它们之间的空间。有人可以就我如何做到这一点提供一些见解吗？

positionText 类似乎对某些人有所帮助，但我似乎无法让 display:none 产生任何影响。

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

【问题讨论】：

发布呈现的 HTML 输出，而不是 PHP 源代码。
为什么不在提交按钮上添加边距？
不确定您到底要做什么，但尝试将所有输入设置在同一行。这将删除任何空白。您也可以使用 float 来完成类似的结果。
@jo8691 屏幕截图添加
@Ricky Goldman 将所有隐藏输入设置在同一行上，使它们更接近，但仍有相当大的空间。查看我添加的照片。

标签： php html css button

【解决方案1】：

由于 form 和 pre 属于块类型，因此您需要在 CSS 中添加 margin: 0。

pre,form{margin: 0}

【讨论】：

【解决方案2】：

您可以使用 css 选择提交按钮本身。

例如：

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

您也可以使用

选择输入

[type="hidden"]or.positionText 输入{}

如果您想单独设置每个提交的样式，请尝试

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

您还可以使用

:first-child() 和 :last-child()

来选择第一个和最后一个提交。

希望对您有所帮助。

【讨论】：

这让我走上了正轨，但没有完成工作。看我添加的照片，调整后的边距和显示输出或多或少相同：无。
您使用的是 chrome，因为 chrome 可能会在您的输入中添加默认浏览器样式，这可能是您出现问题的原因。尝试使用 chrome 开发工具检查是否有任何样式冲突/覆盖。