当前位置： 文江博客话题详情

即使使用宽度，我的CSS-Button也不会得到反应

发布于 2025-01-18 14:07:49 字数 4183 浏览 1 评论 0原文

我必须设计一份时事通讯，但是我的按钮没有响应。大概是因为班级的原因吧。如果我在课堂外创建另一个，它会变得更好。该类没有 css 那么为什么它可以更改我的按钮。

HTML-Code:

<!DOCTYPE html\>



    
    Title
    
<!-- stylesheet für das Sende-Button-icon hinzugefügt-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
          crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    



    <form action="https://adra.us6.list-manage.com/subscribe/post?u=e2d5faa9b94a0d751d430e84b&amp;id=28f961ba01" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    
        <div id="mc_embed_signup_scroll">
    
            <div class="mc-field-group input-group">
    
                <ul><li><input type="checkbox" value="Herr" name="MMERGE3" id="mce-MMERGE3-0"><label for="mce-MMERGE3-0">Herr</label></li>
    
                    <li><input type="checkbox" value="Frau" name="MMERGE3" id="mce-MMERGE3-1"><label for="mce-MMERGE3-1">Frau</label></li>
    
                    <li><input type="checkbox" value="Anders" name="MMERGE3" id="mce-MMERGE3-2"><label for="mce-MMERGE3-2">Keine Angaben</label></li>
    
                </ul>
    
            </div>
    
            <div class="mc-field-group">
    
                <input type="text" value="" name="VNAME" class="required" id="mce-VNAME" placeholder="Vorname" required>
    
            </div>
    
            <div class="mc-field-group">
    
                <input type="text" value="" name="LNAME" class="required" id="mce-LNAME" placeholder="Familienname" required>
    
            </div>
    
            <div class="mc-field-group">
    
                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="eMail" required>
    
            </div>
    
            <div id="mce-responses" class="clear foot">
    
                <div class="response" id="mce-error-response" style="display:none"></div>
    
                <div class="response" id="mce-success-response" style="display:none"></div>
    
            </div>
    
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e2d5faa9b94a0d751d430e84b_28f961ba01" tabindex="-1" value=""></div>
    
            <div class="optionalParent">
                <div class="clear foot">
                    <button name="subscribe" id="mc-embedded-subscribe" class="button"><i class="far fa-paper-plane"></i> Senden</button>
                </div>
            </div>
    
    
    
        </div>
    
    </form>

CSS-Code:

#mc_embed_signup .input-group ul {
font-weight: 400;
line-height: 1.5;
font: 16px Zilla;
display: flex;
justify-content: space-between;
width: 50%;
box-sizing: border-box;
height: 20px;
text-align: left;

}

#mc_embed_signup .mc-field-group input[type="text"], #mc_embed_signup .mc-field-group input[type="email"] {
background: #ffffff;
border-color: #D9D9D6;
border-width: 1px;
border-radius: 3px;
padding: 4px 6px;
min-height: 33px;
max-width: 100%;
-basis: 100%;
font: 13px Zilla;
margin: 10px 0;
}

#mc_embed_signup .optionalParent #mc-embedded-subscribe {
background:  #007960;
color: #ffffff;
width: 100%;
padding: 0 24px;
font: 15px Zilla;
border-radius: 3px;
flex-basis: 100%;
cursor: pointer;
vertical-align: middle;
margin-top: 10px;
min-height: 35px;
overflow: hidden;
}

#mc_embed_signup .optionalParent #mc-embedded-subscribe:hover {
background-color:  #007960;`
}

在此处输入图像描述

我期望按钮达到 100%，其中输入结尾。

如果我删除除按钮之外的所有 css 代码： 在此处输入图片说明

原文

I have to design a newsletter, however my button doesn't get responsive. It is probably because of the class. If I create another outside the class it gets better. The class has no css so why can it change my button.

HTML-Code:

<!DOCTYPE html\>



    
    Title
    
<!-- stylesheet für das Sende-Button-icon hinzugefügt-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
          crossorigin="anonymous" referrerpolicy="no-referrer"
    />
    



    <form action="https://adra.us6.list-manage.com/subscribe/post?u=e2d5faa9b94a0d751d430e84b&id=28f961ba01" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    
        <div id="mc_embed_signup_scroll">
    
            <div class="mc-field-group input-group">
    
                <ul><li><input type="checkbox" value="Herr" name="MMERGE3" id="mce-MMERGE3-0"><label for="mce-MMERGE3-0">Herr</label></li>
    
                    <li><input type="checkbox" value="Frau" name="MMERGE3" id="mce-MMERGE3-1"><label for="mce-MMERGE3-1">Frau</label></li>
    
                    <li><input type="checkbox" value="Anders" name="MMERGE3" id="mce-MMERGE3-2"><label for="mce-MMERGE3-2">Keine Angaben</label></li>
    
                </ul>
    
            </div>
    
            <div class="mc-field-group">
    
                <input type="text" value="" name="VNAME" class="required" id="mce-VNAME" placeholder="Vorname" required>
    
            </div>
    
            <div class="mc-field-group">
    
                <input type="text" value="" name="LNAME" class="required" id="mce-LNAME" placeholder="Familienname" required>
    
            </div>
    
            <div class="mc-field-group">
    
                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="eMail" required>
    
            </div>
    
            <div id="mce-responses" class="clear foot">
    
                <div class="response" id="mce-error-response" style="display:none"></div>
    
                <div class="response" id="mce-success-response" style="display:none"></div>
    
            </div>
    
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_e2d5faa9b94a0d751d430e84b_28f961ba01" tabindex="-1" value=""></div>
    
            <div class="optionalParent">
                <div class="clear foot">
                    <button name="subscribe" id="mc-embedded-subscribe" class="button"><i class="far fa-paper-plane"></i> Senden</button>
                </div>
            </div>
    
    
    
        </div>
    
    </form>

CSS-Code:

#mc_embed_signup .input-group ul {
font-weight: 400;
line-height: 1.5;
font: 16px Zilla;
display: flex;
justify-content: space-between;
width: 50%;
box-sizing: border-box;
height: 20px;
text-align: left;

}

#mc_embed_signup .mc-field-group input[type="text"], #mc_embed_signup .mc-field-group input[type="email"] {
background: #ffffff;
border-color: #D9D9D6;
border-width: 1px;
border-radius: 3px;
padding: 4px 6px;
min-height: 33px;
max-width: 100%;
-basis: 100%;
font: 13px Zilla;
margin: 10px 0;
}

#mc_embed_signup .optionalParent #mc-embedded-subscribe {
background:  #007960;
color: #ffffff;
width: 100%;
padding: 0 24px;
font: 15px Zilla;
border-radius: 3px;
flex-basis: 100%;
cursor: pointer;
vertical-align: middle;
margin-top: 10px;
min-height: 35px;
overflow: hidden;
}

#mc_embed_signup .optionalParent #mc-embedded-subscribe:hover {
background-color:  #007960;`
}

enter image description here

I expectet the button to get up to 100%, where the inputs end.

If I remove all the css-code excluding the button:
enter image description here

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

身边 2025-01-25 14:07:49

我注意到您在CSS中写了一个错误的ID名称。您写了#mc_embed_signup，但根据您的HTML，正确的是#MC_EMBED_SIGNUP_SCROLL。

为了使按钮宽度完整，只需在CSS中的第二组类中添加width：100％即可。

您只需用以下一个即可替换CSS即可快速解决方案。

#mc_embed_signup_scroll .input-group ul { font-weight: 400; line-height: 1.5; font: 16px ; display: flex; justify-content: space-between; width: 50%; box-sizing: border-box; height: 20px; text-align: left;}
#mc_embed_signup_scroll .mc-field-group input[type="text"], #mc_embed_signup_scroll .mc-field-group input[type="email"] { background: #ffffff; border-color: #D9D9D6; border-width: 1px; border-radius: 3px; padding: 4px 6px; min-height: 33px; max-width: 100%; flex-basis: 100%; font: 13px ; margin: 10px 0; width: 100%; }
#mc_embed_signup_scroll .optionalParent #mc-embedded-subscribe { background: #007960; color: #ffffff; width: 100%; padding: 0 24px; font: 15px ; border-radius: 3px; flex-basis: 100%; cursor: pointer; vertical-align: middle; margin-top: 10px; min-height: 35px; overflow: hidden; }
#mc_embed_signup_scroll .optionalParent #mc-embedded-subscribe:hover { background-color: #007960; }

I noticed you wrote an incorrect ID name in the CSS. You wrote #mc_embed_signup but correct is #mc_embed_signup_scroll as per your HTML.

For making button width full just need to add width:100% in the second group of classes in your CSS.

You can simply replace your CSS with the below one for a quick solution.

#mc_embed_signup_scroll .input-group ul { font-weight: 400; line-height: 1.5; font: 16px ; display: flex; justify-content: space-between; width: 50%; box-sizing: border-box; height: 20px; text-align: left;}
#mc_embed_signup_scroll .mc-field-group input[type="text"], #mc_embed_signup_scroll .mc-field-group input[type="email"] { background: #ffffff; border-color: #D9D9D6; border-width: 1px; border-radius: 3px; padding: 4px 6px; min-height: 33px; max-width: 100%; flex-basis: 100%; font: 13px ; margin: 10px 0; width: 100%; }
#mc_embed_signup_scroll .optionalParent #mc-embedded-subscribe { background: #007960; color: #ffffff; width: 100%; padding: 0 24px; font: 15px ; border-radius: 3px; flex-basis: 100%; cursor: pointer; vertical-align: middle; margin-top: 10px; min-height: 35px; overflow: hidden; }
#mc_embed_signup_scroll .optionalParent #mc-embedded-subscribe:hover { background-color: #007960; }
回复 原文
~没有更多了~

关于作者

血之狂魔

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文