【问题标题】:Removing borders from a button element从按钮元素中删除边框
【发布时间】:2020-03-27 13:26:37
【问题描述】:

我有这个按钮:

使用以下样式:

const SubmitButton = styled.button`
    width: 275px; 
    height: 30px;
    background-color: red;
    border:none;
    outline:none;
`;

我删除了主边框,但现在如果你仔细观察,我会保留这个左边的空白。

我怎样才能删除它?

【问题讨论】:

    标签: html css styled-components


    【解决方案1】:

    橙子是从哪里来的?当我用这些样式制作一个按钮时,所有出来的都是一个红色背景的无边框按钮。也许我们可以更清楚地看到代码吗?我真的不记得 'styled' 是 javascript 中的东西。

    这是我的按钮和我的代码,看看它是否对你有帮助:

    <!DOCTYPE html>
    <html>
        <head>
            <title>My Blog</title>
            <script src='script.js'></script>
        </head>
        <body>
            <button style='width:275px;height: 30px;background-color: red;border:none;outline:none;'>Login</button>
        </body>
    </html>
    

    这是输出: The Button

    【讨论】:

    • 仅供参考,styled 表示正在使用 StyledComponents
    • 哦,抱歉,我是个初学者,但我仍然想知道为什么会这样。也许这是一个错误。我真的不知道。老实说,你应该坚持使用普通版本,比如login_btn = document.createElement('button'),login_btn.innerText = 'Login',使用 login_btn.style 作为样式(或者你可以创建一个函数来自动为你做这件事,然后获取 body 元素(body = document.getElementsByTagName('body') ),最后,做body.appendChild(login_btn)。如果你真的想使用Javascript(我不会),你可以做所有事情。
    • 没用 :( ,我认为这无法解决。也许我会改用输入类型提交
    【解决方案2】:

    如果您说的是为什么按钮不左对齐,这取决于应用于按钮容器(可能是页面本身)的样式。

    您可以尝试一些事情:

    • 在容器样式中添加text-align:left
    • 在按钮样式中添加self-align: left
    • 从容器中删除填充或设置padding-left: 0

    【讨论】: