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格式

回答

相關問題