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>
我并不孤单与这个问题。我已经阅读过,但仍未得到答复。
我是否明确了我的观点?
答
解决了这个问题:不要使用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>
答
感谢您的帮助!!!!
但我发现自己犯了一个错误。
我将#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>
您使用了两次id'id17'。对于容器div和表单。 ID应该是唯一的。使用类代替:'
由于这种CSS样式溢出:hidden;表单不显示在页面中。 –