Question

表单内的按钮似乎比表单外的按钮周围有更多的填充。我试图使表单内按钮等于无表单按钮。

HTML/PHP

const display = (feature: DisplayableFeature) => {
    if (isFeatueOfType(feature, "A")) {
        doSometingWithA(feature) // typechecks
        console.log("type A", feature.geometry.a, feature.indivAttribute);
    }
    else if (isFeatueOfType(feature, "B")) {
        console.log("type B", feature.geometry.b, feature.indivAttribute)
    }
    else if (isFeatueOfType(feature, "C")) {
        console.log("type C", feature.geometry.c, feature.aggAttribute)
    }
    else {
        throw Error()
    }
}

function doSometingWithA(a: IndividualFeature<A>) {}

CSS

<?php 
        if (!(isset($_SESSION["sessionID"]))){
            echo "<button onClick='handleSignInClick()' id='sign_in_button' class='btn'>Sign In</button>";
        }
        else {
            echo "<form action='handler_sign_out.php' method='post' class='remove_padding'><input type='submit' class='btn' value='Sign Out'></form>";
        }

    ?>

Answer 1

每当您在 .btn 类上设置固定宽度时，两个按钮都会获得相同的宽度。当您认为它与填充有关时，您实际上是不对的。问题其实是按钮内部的值造成的。

'登录' '退出'

你看出区别了吗？ “退出”实际上是一个更宽的字符串。这就是按钮大小比“登录”按钮大的原因。我放了一个宽度：100px;在 .btn 类上，因此按钮的宽度完全相同。

还有其他一些笔记。您在 css 中设置边距/填充的方式不切实际。

您的代码：

padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;

尝试像下一个示例一样编写边距/填充。

padding: 0;
margin: 0;

您可以像下一个示例一样设置边距和填充。

margin: 0 1px 2px 3px;

这与：

margin-top: 0;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 3px;

填充的计数相同。我希望我在这方面对您有所帮助，并且很抱歉就您没有特别要求的代码向您提供反馈。我希望你不介意并把它捡起来！

CSS：试图使表单内的按钮看起来与表单外的按钮相同

1 个答案: