Question

我有以下HTML和CSS文件，其中类＆＃34;表＆＃34; div受其类＆＃34;登录＆＃34;的兄弟div的css影响，因为虚线边框包含divs。

可能是什么问题和解决方案？非常感谢!!

<!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;}

Answer 1

从.table声明中删除float：left，如下所示：http://jsbin.com/wanuyewewome/1/edit

Answer 2

我为解决问题的float: left div添加了login。

CSS无意中影响了兄弟div

2 个答案: