css转换与div格式

我试图让一个框被淡出，如果我点击它。它正在工作，但形式没有。css转换与div格式

如果点击'17 | Lampe im Esszimmer ... C301 | FrauMüller'，然后'Beschreibung'和'Notiz'出现了，但我错过了完整的表格。

这里是我的代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
       p {width: 320px; margin: 0px;} 
       form {width: 320px; margin: auto;} 
       #main {background-color: brown;} 
       #id17 {background-color: blue; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;} 
       #id17:target {height: 100px;} 
       .center {text-align: center;} 

     </style> 
    </head> 

    <body> 
     <div id='main' class='center'> 
      <a href=#id17>17 | Lampe im Esszimmer ...<br>C301 | Frau Müller</a><br> 
      <div id='id17' class='center'><br> 
       Beschreibung:<br> 
       Lampe im Esszimmer defekt. Es ist eine LED Birne.<br> 
       Notiz:<br> 
       Hier steht eine Notiz, wenn eine geschrieben wurde<br> 
       <form id='id17' action='test.php' method='post'> 
        <fieldset> 
         <select name='std'> 
          <option value='0'>0</option> 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
         </select><br> 
         <select name='min'>"; 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
          <option value='60'>60</option> 
         </select><br> 
         <input type='submit' value='erledigt'> 
        </fieldset> 
       </form> 
      </div> 
     </div> 
    </body> 
</html>

我并不孤单与这个问题。我已经阅读过，但仍未得到答复。

我是否明确了我的观点？

来源

2017-07-17 greenMover

您使用了两次id'id17'。对于容器div和表单。 ID应该是唯一的。使用类代替：'

由于这种CSS样式溢出：hidden;表单不显示在页面中。 –

解决了这个问题：不要使用ID在form标签

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
       p {width: 320px; margin: 0px;} 
       form {width: 320px; margin: auto;} 
       #main {background-color: yellow;} 
       #id17 {background-color: green; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;} 
       #id17:target {height: 400px;} 
       .center {text-align: center;} 

     </style> 
    </head> 

    <body> 
     <div id='main' class='center'> 
      <a href=#id17>17 | Lampe im Esszimmer ...<br>C301 | Frau Müller</a><br> 
      <div id='id17' class='center'><br> 
       Beschreibung:<br> 
       Lampe im Esszimmer defekt. Es ist eine LED Birne.<br> 
       Notiz:<br> 
       Hier steht eine Notiz, wenn eine geschrieben wurde<br> 
       <form id='' action='test.php' method='post'> 
        <fieldset> 
         <select name='std'> 
          <option value='0'>0</option> 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
         </select><br> 
         <select name='min'>"; 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
          <option value='60'>60</option> 
         </select><br> 
         <input type='submit' value='erledigt'> 
        </fieldset> 
       </form> 
      </div> 
     </div> 
    </body> 
</html>

来源

2017-07-17 09:32:21 Nihal

感谢您的帮助!!!!

但我发现自己犯了一个错误。

我将＃id17：target-height限制为400px。我认为这是问题所在。用我的新CSS线，它的工作原理如下：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Designtest</title> 
     <meta charset='utf-8'> 
     <style> 
      p {width: 320px; margin: 0px;} 
      form {width: 320px; margin: auto;} 
      #main {background-color: brown;} 
      #id17 {background-color: blue; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;} 
      #id17:target {height: 100%;} 
      #id18 {background-color: blue; height: 0; overflow: hidden; transition: height 500ms ease-in 0s;} 
      #id18:target {height: 100%;} 
      .center {text-align: center;} 
      .id17 {overflow: visible; height: 100px;} 
      .id18 {overflow: visible; height: 100px;} 
     </style> 
    </head> 

    <body> 
     <div id='main' class='center'> 
      <a href=#id17>17 | Lampe im Esszimmer ...<br>C301 | Frau Müller</a><br> 
      <div id='id17' class='center'><br> 
       Beschreibung:<br> 
       Lampe im Esszimmer defekt. Es ist eine LED Birne.<br> 
       Notiz:<br> 
       Hier steht eine Notiz, wenn eine geschrieben wurde<br> 
       <form class='id17' action='test.php' method='post'> 
        <fieldset> 
         <select name='std'> 
          <option value='0'>0</option> 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
         </select><br> 
         <select name='min'>"; 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
          <option value='60'>60</option> 
         </select><br> 
         <input type='submit' value='erledigt'> 
        </fieldset> 
       </form> 
      </div> 
      <a href=#id18>17 | Lampe im Esszimmer ...<br>C301 | Frau Müller</a><br> 
      <div id='id18' class='center'><br> 
       Beschreibung:<br> 
       Lampe im Esszimmer defekt. Es ist eine LED Birne.<br> 
       Notiz:<br> 
       Hier steht eine Notiz, wenn eine geschrieben wurde<br> 
       <form class='id18' action='test.php' method='post'> 
        <fieldset> 
         <select name='std'> 
          <option value='0'>0</option> 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
         </select><br> 
         <select name='min'>"; 
          <option value='15'>15</option> 
          <option value='30'>30</option> 
          <option value='45'>45</option> 
          <option value='60'>60</option> 
         </select><br> 
         <input type='submit' value='erledigt'> 
        </fieldset> 
       </form> 
      </div> 
     </div> 
    </body> 
</html>

来源

2017-07-17 15:42:01 greenMover

css转换与div格式

回答

相关问题