Question

我正在尝试将过滤器选项添加到我的过滤器区域，但到目前为止没有成功。文本看起来很好，但是由于某种原因没有出现诸如文本框，单选框，按钮之类的东西。大概是一个简单的修复程序，但对于CSS，HTML和一般设计我还是很陌生。如果有人能指出我正确的方向，那就太好了！

屏幕截图：https://i.imgur.com/5KwXys4.jpg

HTML

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Some Web Page</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <div class='menu-container'>
      <div class='menu'>
        <div class='links'>
          <div class='signup'>Sign Up</div>
          <div class='login'>Login</div>
        </div>
      </div>
    </div>
    <div class='header-container'>
      <div class='header'>
        <div class='logo'><img src='images/postloco.svg'/></div>
      </div>
    </div>
    <main>
      <input id="toggle" type="checkbox">
      <label for="toggle">
          <div class="filterbutton"><img src='images/filterbutton.svg'/></div>
      </label>
      <div id="expand">
        <section class="Filter">
            <h2>Text field</h2>
            <p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

            <form action="/action_page.php">
            First name:<br>
            <input type="text" name="firstname">
            <br>
            Last name:<br>
            <input type="text" name="lastname">
            <br><br>
            <input type="submit">
            </form>

            <p>Note that the form itself is not visible.</p>
            <p>Also note that the default width of a text field is 20 characters.</p>
        </section>
      </div>
    </main>
    <section class="carousel">
    </section>
  </body>
  <footer>
      <img src="images/facebook.svg" alt="facebook" title="facebook" href="#" class="social">
      <img src="images/twitter.svg" alt="twitter" title="twitter" href="#" class="social">
      <img src="images/instagram.svg" alt="instagram" title="instagram" href="#" class="social">
      <img src="images/snapchat.svg" alt="snapchat" title="snapchat" href="#" class="social">
      <ul>
          <a alt="about" title="About" href="#" class="footerlink">About</a>
          <a alt="about" title="About" href="#" class="footerlink">Contact</a>
          <a alt="about" title="About" href="#" class="footerlink">Team</a>
          <a alt="about" title="About" href="#" class="footerlink">Whatever</a>
      </ul>
  </footer>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.menu-container {
  color: #fff;
  background-color: #A34F43;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}

.menu {
  width: 100%;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.links {
  display: flex;
  justify-content: flex-end;
}

.login {
  margin-left: 20px;
}

.header-container {
  background-color: #FF7C69;
  display: flex;
  justify-content: center;
}

.header {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-test {
  display: flex;
  justify-content: center;
}

.carousel-grid-container {
  display: flex;
  justify-content: center;
}

.carousel-grid {
  width: 900px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.logo {
  width: 200px;
  display: block;
  margin: 0 auto;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  font-family: "Open Sans", Arial;
  width: 100%;
}
main {
  background: #FF7C69;
  width: 100%;
  margin: 0px auto;
}

input {
  display: none;
  visibility: hidden;
}
label {
  /* display: block; */
  /* text-align: center; */
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
label:hover {
  color: #000;
}

#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.3s;
  background-color: #D6DBED;
  color: black;
}

#toggle:checked ~ #expand {
  height: 250px;
}

footer {
  background-color: #A34F43;
  text-align: right;
  color: #eee;
  text-align: center;
  position: absolute;
  width: 100%; 
  /* display: flex; */
}

.footerlink {
  text-decoration: none;
  color: white;
  text-align: justify;
  display: block;
  padding: 1px;
}

.social {
  padding: 10px;
  width: 50px;
  text-align: right;
  float: right;
}

.social:hover {
  opacity: 0.7;
}

legend {
  background-color: #000;
  color: #fff;
  padding: 3px 6px;
}

.output {
  font: 1rem 'Fira Sans', sans-serif;
}

input {
  margin: .4rem;
}

.filterbutton {
  margin: 0px;
  padding: 0px;
  width: 150px;
  display: block;
}

Answer 1

在CSS中，这行代码隐藏了所有表单输入

input {
  display: none;
  visibility: hidden;
}

我不希望您要像这样全局隐藏所有输入。如果您需要隐藏某些输入项，则可以通过css或将它们放在特殊的HTML标记（例如divs）中进行分组。我看到您在单击复选框后正在展开主窗体。在这种情况下，删除上面的行后，事情仍然应该起作用。

无法将复选框添加到过滤区域

1 个答案: