divでフォームを使用したCSSの移行

クリックした場合、色あせているボックスを取得しようとしています。それは働いていますが、フォームはそうではありません。divでフォームを使用したCSSの移行

「17 |ランペム・イッセーマー... 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'を2回使用しました。コンテナdivの場合、およびフォームの場合。 IDは一意でなければなりません。代わりにクラスを使用してください： '

このCSSスタイルのオーバーフローのために：hidden;フォームがページに表示されていません。 –

は、問題を解決：いけない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

おかげでIDを使用!!!!

しかし、自分で間違いを発見しました。

＃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

divでフォームを使用したCSSの移行

答えて

関連する問題