javascript - 最後の 2 つのフィールドセット間の奇妙なギャップ

Question

他のフィールドセットの下にあるフィールドセットを使用すると、その間に奇妙なギャップが生じますが、それは私のコードにはありません...

CSSは次のとおりです。

fieldset { overflow:hidden }
.some-class { float:left; clear:none; }
.some-class1 { float:left; clear:none; }
.some-class2 { float:left; clear:none; }
.someclass { float:left; clear:none; }
.someclass1 { float:left; clear:none; }

ここにhtml：

<fieldset>
  <div class="some-class">
             <input type="button" value="AAN" style="float:left" onclick="POI(this)" />

    <input type="button" value="UIT" style="float:left" onclick="POI(this)" />
   <span>Spoortoegang </span>

 </div>
</fieldset>
<fieldset>
  <div class="someclass">
                 <input type="button" value="AAN" style="float:left" onclick="Storingen(this)" />

         <input type="button" value="UIT" style="float:left" onclick="Storingen(this)" />
  <span>Storingen</span>
 </div>
</fieldset>

<fieldset>
  <div class="Tekeningen-class">
             <input type="button" value="AAN" style="float:left" onclick="Tekeningen(this)" />

    <input type="button" value="UIT" style="float:left" onclick="Tekeningen(this)" />
   <span>Tekeningen</span>

 </div>
</fieldset>

<fieldset>
  <div class="someclass1">
                   <input type="button" value="AAN" style="float:left" onclick="Ultrasoon(this)" />
<input type="button" value="UIT" style="float:left;" onclick="Ultrasoon(this)" />
  <span>Ultrasoon Rapporten</span>
 </div>
 </fieldset>

   <fieldset>
  <div class="some-class2">
                   <input type="button" value="AAN" style="float:left" onclick="Medewerkers(this)" />
<input type="button" value="UIT" style="float:left;" onclick="Medewerkers(this)" />
  <span>Medewerkers</span>
 </div>
</fieldset>​
 <fieldset style="margin:0px; padding 0px;">

 <ul class="dropdown">
 <div id="some-class1"">
    <li><a id="drivers" onclick="dropdown(this); return false;" class="dir" style="font size=18"">IRISSYS Data &#9660;</a>
        <ul id="driversmenu" class="sub" >
<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisvoertuig(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisvoertuig(this)" />
  <span>Voertuig Effect</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="iriscombinatie(this)" />
<input type="button" value="UIT" style="float:left;" onclick="iriscombinatie(this)" />
  <span>Combinatie Parameter</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irishoogte(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irishoogte(this)" />
  <span>Hoogte</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisschift(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisschift(this)" />
  <span>Schift</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisverkanting(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisverkanting(this)" />
  <span>Verkanting verschil</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisspoorwijdte(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisspoorwijdte(this)" />
  <span>Spoorwijdte Verloop</span></a></li>
</fieldset>

<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irisspoorstaaf(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irisspoortaaf(this)" />
  <span>Spoorstaaf Slijtage</span></a></li>
</fieldset>
<fieldset style="background-color:#c5ccd3">            
            <li><a>  <div class="someclass">
                   <input type="button" value="AAN" style="float:left" onclick="irissporen(this)" />
<input type="button" value="UIT" style="float:left;" onclick="irissporen(this)" />
  <span>IRISSYS Sporen</span></a></li>
</fieldset>

       </ul>
    </li>
        <div>

    </ul>
  </fieldset>

そして、クロムの要素インスペクターで私はこれを取得します:

誰かが私が間違っていることを知っていますか? あなたの助けをいただければ幸いです。

前もって感謝します

Answer 1

答え：

フィールドセットの間には見えない文字があり、赤い点として表示されるものもあります。

​

それを削除すると、問題はなくなります。

http://jsfiddle.net/hsRSD/1/または jsFiddle で削除: http://jsfiddle.net/KPTXR/1/

分かりやすいように他の部分を外しました。

 <fieldset>
    <span>Medewerkers</span>
 </fieldset>​  <-- It is here, but only seen in jsFiddle
 <fieldset style="margin:0px; padding 0px;">


  </fieldset>

アドバイス:

次に、コードで二重引用符にいくつかの問題があります。

 style="font size=18""   <-- remove the duplicate

(実際には CSS はfont-size: 18px)

次に、ネストされた UL を他の要素と一緒に使用しないように注意してください。UL の直下に LI 以外の要素があることから生じる多くの問題を知ることができます。

 <ul id="driversmenu" class="sub" >
     <fieldset style="background-color:#c5ccd3">      <-- THIS will likely cause problems!    
        <li><a>  <div class="someclass">
            <input type="button" value="AAN" style="float:left" onclick="irisvoertuig(this)" />
            <input type="button" value="UIT" style="float:left;" onclick="irisvoertuig(this)" />
            <span>Voertuig Effect</span></a>
        </li>
     </fieldset>

そこにフィールドセットを配置する必要がある場合は、LI の後に配置します。

  <ul id="driversmenu" class="sub" >
     <li>
        <fieldset style="background-color:#c5ccd3">          
        <a> <-- what does this do?
          <div class="someclass">
            <input type="button" value="AAN" style="float:left" onclick="irisvoertuig(this)" />
            <input type="button" value="UIT" style="float:left;" onclick="irisvoertuig(this)" />
            <span>Voertuig Effect</span></a>
        </fieldset>
     </li>

</p>