gpt4 book ai didi

html - CSS无意间影响了兄弟div

转载 作者:行者123 更新时间:2023-11-28 09:44:54 25 4
gpt4 key购买 nike

我有以下 HTML 和 CSS 文件,其中类“table”div 受其兄弟类“login”的 div 的 css 影响,因为虚线边框包围了两个 div

问题和解决方案是什么?非常感谢!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" type="text/css" href="welcome.css">
<title>Vokabeltrainer</title>
</head>
<body>
<div class="left"></div>
<h1>VokabelTester</h1>
<div class="form">
<form action="http://localhost:8080/vokabulary/Welcome" method="get">
<div class="table">
<table>
<tr><th>Sprachen</th></tr>
<tr><td>Englisch<input type="checkbox" value="englisch" name="language" checked="checked"/></td></tr>
<tr><td>Französisch<input type="checkbox" value="franzoesisch" name="language" checked="checked"/></td></tr>
<tr><td>Italienisch<input type="checkbox" value="italienisch" name="language" checked="checked"/></td></tr>
<tr><td>Spanisch<input type="checkbox" value="spanisch" name="language" checked="checked"/></td></tr>
<tr><td>Portugiesisch<input type="checkbox" value="portugiesisch" name="language" checked="checked"/></td></tr>
</table>
</div>
<div class="login">
<h2>Anmeldung</h2>
Name:<input type="text" name="name"/><br/>
Passwort:<input type="password" name="password"/><br/>
Login<input type="radio" name="login" value="login" checked="checked"/><br/>
Registration<input type="radio" name="login" value="registration"/><br/>
<input type="submit" value="LOS GEHT'S"/>
</div>
</form>
</div>
</body>
</html>

CSS:

body{background-color: #6cc034; margin: 0; font-family: Calibri}
h1{margin: 0px;}
.left{display: block; margin: 0;height: 100%; width: 30%; float: left; background-color: green;}
.form{float: left; background-color: orange; width: 50%; border-style: dotted;}
.table{float:left; width:200px; display: block;}
th{font-size: 16pt; width: 150px; text-align: left; height: 60px;}
h2{font-size: 16pt; display: block; background-color: red;}
td{text-align: right; font-size: 14pt;}
.login{font-size: 14pt; display: block; background-color: blue; height: 200px; border-style: dashed;}

最佳答案

像这样从 .table 声明中删除 float:left:http://jsbin.com/wanuyewewome/1/edit

关于html - CSS无意间影响了兄弟div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25296969/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com