我如何更正我的CSS，使一个奇怪的灰色框内我的按钮消失？

bhmjp9jg 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(139)

我需要为我们的网站做一个新的按钮。我把在网站其他地方工作的CSS，复制它，并做了一些小的调整。而不是产生一个按钮或多或少像这样：Good button相反，我在按钮内部得到了一个奇怪的灰色框，围绕着按钮的文本，如下所示：Bad button .（深灰色只是网站的背景。）说到CSS，我是一个完全的新手，但是从一个按钮到下一个按钮的代码看起来基本上是一样的。如果重要的话，这个网站的编辑器是responsivesiteeditor。
我们不再有一个全职的人来处理这类问题，所以一个完整的解释是怎么回事（或链接到您最喜欢的解释者出了什么问题）真的很感激。
这是我的坏按钮代码。

float:none !important;
    top:0 !important;
    left:0 !important;
    text-align:Center !important;
    width:calc(100% - 311px) !important;
    position:Relative !important;
    height:60px !important;
    background-color:#ad665a !important;
    padding-top:0px !important;
    padding-left:60px !important;
    padding-bottom:0px !important;
    margin-right:0px !important;
    margin-left:540px !important;
    max-width:159px !important;
    margin-top:10px !important;
    margin-bottom:10px !important;
    padding-right:0px !important;
    min-width:25px !important;
    text-align:start !important;
    display:block !important;
    background-color:#ad665a !important;
    border:none !important;
    color:white !important;
    padding:15px 32px !important;
    text-align:center !important;
    display:inline-block !important;
    font-size:16px !important;
    border-radius:8px !important;

下面是good按钮的代码

float:none !important;
    top:0 !important;
    left:0 !important;
    width:calc(100% - 311px) !important;
    position:relative !important;
    height:91px !important;
    padding-top:0px !important;
    padding-left:0px !important;
    padding-bottom:0px !important;
    margin-right:311.5px !important;
    margin-left:311.5px !important;
    max-width:159px !important;
    margin-top:10px !important;
    margin-bottom:10px !important;
    padding-right:0px !important;
    min-width:25px !important;
    text-align:start !important;
    display:block !important;

我已经调整了一些东西，并与它斗争，使它适合新的上下文，但即使我回到原来的编码，我得到相同的灰色框。

css

来源：https://stackoverflow.com/questions/75686889/how-do-i-correct-my-css-to-make-a-strange-grey-box-inside-my-button-disappear

1条答案

按热度按时间

kognpnkq1#

首先，我不知道该网站的结构，但据我所知，你是使用太多的方式为一个简单的按钮属性。
如果您想要与红色按钮完全相同的按钮，可以复制属性并将按钮的背景色更改为绿色。
例如：

.bad {
            float: none !important;
            top: 0 !important;
            left: 0 !important;
            text-align: Center !important;
            width: calc(100% - 311px) !important;
            position: Relative !important;
            height: 60px !important;
            background-color: #ad665a !important;
            min-width: 25px !important;
            text-align: start !important;
            display: block !important;
            background-color: #ad665a !important;
            border: none !important;
            color: white !important;
            padding: 15px 32px !important;
            text-align: center !important;
            display: inline-block !important;
            font-size: 16px !important;
            border-radius: 8px !important;
        }

        .good {
            float: none !important;
            top: 0 !important;
            left: 0 !important;
            text-align: Center !important;
            width: calc(100% - 311px) !important;
            position: Relative !important;
            height: 60px !important;
            background-color: green !important;
            min-width: 25px !important;
            text-align: start !important;
            display: block !important;
            border: none !important;
            color: white !important;
            padding: 15px 32px !important;
            text-align: center !important;
            display: inline-block !important;
            font-size: 16px !important;
            border-radius: 8px !important;
        }

<button class="bad">
        bad button
    </button>

    <button class="good">
       good button
    </button>

如果你想知道更多关于按钮，如何使用和样式，我建议你看看这个主题上的W3Schools：
W3Schools CSS Buttons

赞(0）回复(0）举报 2023-03-14

我来回答

我如何更正我的CSS，使一个奇怪的灰色框内我的按钮消失？

1条答案

相关问题

热门标签

最新问答