从按钮元素中删除边框答案

【问题标题】：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

【讨论】：