文字未出现在 HTML/CSS 中的按钮上

Question

我正在 HTML/CSS 中创建一个页脚，我正在尝试在页脚底部创建一个电子邮件表单。 我已经创建了按钮和表单本身； 但是，按钮上的文字不会出现。

这是我的 HTML 代码：

 * { padding: 0; margin: 0; box-sizing: border-box; } .footer-container { background-color: #212329; padding-bottom: 20px; width: 80%; height: 40vh; display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto; } .footer-container h4 { color: #fff; text-align: left; text-shadow: 0.5px 0.5px gray; } .footer-container h6 { color: #fff; text-shadow: 0.5px 0.5px gray; } .footer-heading { display: flex; flex-direction: column; margin-right: 4rem; } .footer-heading h6 { color: #fff; margin-bottom: 2rem; } .footer-heading a { color: #fff; text-decoration: none; margin-bottom: 0.5rem; } .footer-heading a:hover { color: darkgoldenrod; transition: 0.5s ease-in-out; } .email-form h4 { margin-bottom: 2rem; } #footer-email { width: 250px; height: 40px; border-radius: 4px; outline: none; border: none; padding-left: 0.5rem; font-size: 1rem; margin-bottom: 1rem; } #footer-email::placeholder { color: #b1b1b1; } #footer-email-btn { width: 100px; height: 40px; border-radius: 4px; background-color: darkred; outline: none; border: none; color: #fff; font-size: 1rem; } #footer-email-btn:hover { cursor: pointer; background-color: darkgoldenrod; transition: all 0.4s ease-in-out; }

 <section class="footer-container"> <h4>Golden Lion Insurance Services</h4> <div class="footer-heading"> <h6>About Golden Lion</h6> <a href="#">About Rose</a> <a href="#">Rose Income Tax Services</a> </div> <div class="footer-heading"> <h6>Services</h6> <a href="#">Auto</a> <a href="#">Home</a> <a href="#">Truck</a> <a href="#">Health</a> <a href="#">Commercial</a> <a href="#">Life</a> <a href="#">Bonds</a> <a href="#">Annuities</a> </div> <div class="footer-heading"> <h6>Resources</h6> <a href="#">Blog</a> </div> <div class="footer-heading"> <h6>Contact Us</h6> <a href="#"></a> <a href="#"></a> </div> <div class="footer-heading"></div> <div class="email-form"> <h4>Get Your Latest Insurance Tips from Us!</h4> <input type="email" placeholder="Enter your email here" id="footer-email"> <button type="submit" value="Sign Up!" id="footer-email-btn"></button> </div> </section>

也许我可能错过了 CSS 上的一些编码，但是“注册！”这句话。 当我在浏览器上启动代码时没有出现（我使用的是当前版本的谷歌浏览器）。 任何帮助或指示？

再次感谢！

Answer 1

不用担心，您只需要在底部标签内添加一些文字即可。

将您的 HTML 按钮标签更新如下

<button type="submit" value="Sign Up!" id="footer-email-btn">Submit</button>

Answer 2

问题似乎出在从底部起第 3 行的 HTML 文件中。 当你声明一个按钮时，你需要在其中提及一些innerText。

例如： <button> innerText </button>

同样对于您的代码：

<button type="submit" value="Sign Up!" id="footer-email-btn">Sign Up!</button>