簡體   English   中英

無法在Div中的HTML表單上輸入文本

[英]Can't Input Text on HTML Form in Div

我制作了一個可以正常工作的表單,但是一旦將其放置在我的網站中,就無法單擊任何框來輸入文本。 我相信我已將其范圍縮小到我的導航欄(div中的菜單)與我正在使用的另一個div之間的沖突,並且可能直到719px為止-如果我錯了,請糾正我。 我是新手,所以我不確切知道問題出在哪里或為什么發生。 先謝謝您的幫助!

https://codepen.io/sshine2/pen/BREyBx

HTML

 <div class="menu">
<ul>
    <li><a href="#">Social</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Skills</a></li>
  <li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

<div class="containers">
<h2>Get in Touch</h2>

 <form method="post" action="confirm.php">
 <label for ="name">Name: </label><span class="error">* required</span>
 <input type="text" name="name" required/><br /> 
 <label for ="email">E-Mail: </label><span class="error">* required</span>
 <input type="email" name="email" required/><br />
 <label for ="topic">Topic: </label><span class="error">* required</span>
 <input type="text" name="topic" required/><br />
 <label for ="question">Longest Time You've Spent in a Car: </label><span class="error">* required</span>
 <input type="text" name="question" required/><br />
  <label for ="thoughts">Thoughts for Shoshi: </label><span class="error">* required</span>
  <textarea name="message" rows="15" cols="100" required></textarea><br />
  <input type="submit" value="Share Your Thoughts" />
  </form>
</div>

CSS

@media only screen and (min-width: 319px) {
h2 {
font-family: 'Special Elite', cursive;
    font-size: 1.7em;
font-weight: 500;
    text-align: center;
}

.containers {
background: rgba(255,255,255, 0.9);
padding: 15px;
margin: 0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size: 1.5em;
} 
}

@media only screen and (min-width : 410px) {   
.menu {
font-size: 2.1em;
    margin-top: 1.9em;
}
.menu ul {
    margin-top: 28%;
}
}

@media only screen and (min-width : 768px) {     
.menu {
display: block!important;
position: fixed;
font-size: .9em;
width: 100%;
margin-top: -.3em;
background: rgba(255, 255, 255, 0);
}
}

感謝TricksfortheWeb ...

相對於容器div類,將z-index設置為100,並添加位置:

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM