页面中input元素与按钮不显示,调整CSS属性后问题已解决
问题修复说明
代码现在已正常运行
我已经完成第一页的调试并实现了到第二页的跳转,第二页使用了完全相同的CSS和高度相似的HTML代码,因此之前一直无法找到按钮完全不显示的原因。
注意: 当我删除.html文件中的.css引用链接后,所有按钮和输入框都正常显示了!我已经修复了
.comm类中的hidden属性,并添加了如下代码:
#register{ visibility: visible; }
完整代码参考
CSS代码
* { padding: 0; margin: 0; /*box-size:border-box;*/ } body { background: rgba(255, 84, 151, 0.40); } #container { width: 300px; margin: 0 auto; margin-top: 150px; } .tabs { display: table-cell; width: 30%; background-color: rgba(11, 177, 224, 0.82); padding: 10px; float: left; text-align: center; vertical-align: middle; border: 2px solid #ffffff; border-bottom: 0px; position: relative; font-size: 1.3em; color: #ffffff; } .tabs:hover, p { cursor: pointer; } #lt { background-color: rgb(12, 132, 189); } #cont { width: 95%; height: 380px; background-color: rgba(11, 177, 224, 0.82); border: 2px solid #ffffff; } input { display: block; width: 250px; margin: 10px 13px; padding: 10px; font-size: 1.3em; color: rgba(11, 177, 224, 0.82); outline: 2px solid #ffffff; } input[type="submit"] { width: 272px; color: #6e6e6e; } #clear { clear: both; } .comm { position: absolute; visibility: hidden; } #login { visibility: visible; } h3 { display: table-cell; vertical-align: middle; padding: 10px 15px; font-size: 1.5em; color: #ffffff; } #forgot h3 { display: block; margin-top: 30px; text-align: center; } #forgot div { margin-top: 30px; } p { padding: 10px 15px; font-size: 1.3em; color: #ffffff; }
HTML代码
<header> <h2>Billy Bronco's Grading Calculator</h2> </header> <div id="container"> <div id="tabs"> <p id="rt" class="tabs" onclick="regTabFun()">Register</p> <link rel="stylesheet" href="Login.css"> <div id="clear"></div> </div> <div id="cont"> <div id="register" class="comm"> <h3>Register</h3> <input id="re" type="email" placeholder="Email" required/> <input id="rp" type="password" placeholder="Password" required/> <input id="rrp" type="password" placeholder="Re write Password" required/> <input type="button" class="button" id="enterR" value="Register"> <input type="button" class="button" id="enter" value="Login"> <input type="button" class="button" id="forgotPass" value="Forgot Password?"> </div> </div> </div> <script src="RegisterTs.js"></script>
谢谢!
内容的提问来源于stack exchange,提问作者Erin B
相关产品推荐
相关产品推荐

