7

よくわからない不思議な問題を抱えているようです。

これは私のhtmlです：

<div class="menu">
Por favor seleccione os conteúdos:
<br/>
<br/>
<br/>
Nome:
<input name="Nome" class="checkbox" type="checkbox" value="Nome" checked />
<br/>
<br/>
Data:
<input name="Data" class="checkbox"  type="checkbox" value="Data" checked />
<br/>
<br/>
Cliente:
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked />
<br/>
<br/> 
Observações:
<input name="Observações" class="checkbox"  type="checkbox" value="Observações" checked />
</div>

本体内に配置されたDreamweaverのデフォルトのもの以外は何もないHtmlページ内。

このCSSを添付すると：

@charset "UTF-8";
/* CSS Document */

.menu 

{
width:300px;
margin-left: auto;
margin-right: auto;
padding:10px;
border: 1px solid #000;

 }

 .checkbox {

float:right;
}

これで、このコードはSafariで正しくレンダリングされ、左側にテキストが表示され、div内の右側にチェックボックスが配置されます。

Firefoxではそうではありません。

チェックボックスは、行を落としたように見えます。

理解できない問題に関連しているようですが、チェックボックスが最初に来る場合は次のようになります。

<br/>
<input name="Cliente" class="checkbox" type="checkbox" value="Cliente" checked  />Cliente:
<br/>

予想通りSafariでは良くありませんが、Firefoxでは意図した方法でレンダリングされます。

行が落ちた原因がわからないようです。

4

1 に答える 1

8

フロートは、htmlでフロートに続くコードにのみ影響します。ラベルの後に入力があるので、それは右にフロートされますが、新しい行になります。さまざまなブラウザ<br>がさまざまな方法でレンダリングします。

チェックボックスを実行するための優れたクロスブラウザの方法は次のとおりです。

.cb-row {margin: 10px;clear:both;overflow:hidden;}
.cb-row label {float:left;}
.cb-row input {float:right;}

<div class="menu">
    Por favor seleccione os conteúdos:
    <div class="cb-row">
        <label for="nome">Nome:</label>
        <input id="nome" name="Nome" type="checkbox" value="Nome" checked />
    </div>
    <div class="cb-row">
        <label for="data">Data:</label>
        <input id="data" name="Data" type="checkbox" value="Data" checked />
    </div>
    <div class="cb-row">
        <label for="cliente">Cliente:</label>
        <input id="cliente" name="Cliente" type="checkbox" value="Cliente" checked />
    </div>
    <div class="cb-row">
        <label for="ob">Observações:</label>
        <input id="ob" name="Observações" type="checkbox" value="Observações" checked />
    </div>
</div>

ラベルは左にフロートされ、チェックボックスは右にフロートされます。これらは、行間のマージンを制御する行divに含まれています。入力からを削除しclass=、代わりに入力のスタイルを設定しました.cb-row input

for=でラベルを使用し、一致する入力でラベルを使用する利点は、ラベルid=をクリックすると、チェックボックスが選択/選択解除されることです。

于 2009-07-06T12:36:18.410 に答える