0

こんにちは私はfieldsetCSSのに問題があります。

私はこの例を持っています

この例では、左側に境界線があります。

margin-left: 0px;

暗いフレームで1行/高さで正確にフラッシュします。右側には、クラスfrが持っていることがわかります

margin-right: 0px;

ただし、フレームの境界線と同じ高さにはなりません。私はそれのためにグーグルを試みました、しかし私はそれについて何も見つけることができませんでした。この現象は正常ですか、それとも私は何を間違っていますか？特定の境界線はありますか？

アップデート

こんにちは、この質問に答えてくれてありがとう。そのコードをエディター（dreamweaver cs6）に直接実装しようとしましたが、以前はjsfiddleと同じスタイルであると思いました。間違い。結果として私はこれを取得するので、エディタに問題があるようです：

cs6フィールドセット

左側に自動的に追加されたタブがあるようです。それで、その問題について知っている人はいますか？どうもありがとう。

更新2：

cssのデフォルト設定をリセットする必要がありました。

4

5 に答える 5

1

主なものは、ラベルが80px幅に設定されており、入力が180px幅に設定されていることです。

おそらく同じサイズである必要があります。また、あなたの数学をチェックして、すべてが正しく加算されることを確認します。

于 2012-07-18T21:58:00.903 に答える
0

いくつかの入力フィールド（おそらくフォーム？）を列に入れたいようですが、それを行うための最良の方法がわからないようです。

私は現在フォームに取り組んでいます。実際には、div内に2つの列が必要な場合の方法は次のとおりです。

 <form>
   <fieldset>
    <legend>The form to fill out</legend>
      <p> Any instructions for the form. Fields marked with <span class="red">Red</span> are required.</p>

     <div class="columnA">
       <label for="fname">Label 1</label>
       <input type="text" name="fname" tabindex="1" />
     </div>

     <div class="columnB">
       <label for="address1">Address:</label>
       <input type="text" name="address1" tabindex="10" />
     </div>

     <div class="fullwidth">
       <input type="submit" value="Register"/>
     </div>
   </fieldset>
 </form>

次に、上記の各クラスのCSSでこれらが（最低限）設定されていることを確認します。

マージンパディング幅

（アドバイス：実際には、CSSのすべての部分でこれらを最初に設定します。CSSに独自の要素の順序がある場合は構造が得られます。私が使用するということではありませんが、独自の要素を採用することで、時間を節約できます。再トラブルシューティング）

親要素（フォームを含むdivが何であれ）が必要な場合は、すべての子要素もフロートする必要があることを忘れないでください。

ここで、columnAを左に、columnBを右にフロートすることを考えるかもしれません。どちらも、マージンとパディングを追加すると最大50％になる幅に設定されます。しかし、私のコンテンツがそれほど多くの不動産を要求しない限り、実際には両方を左に浮かせることができ、フォーム全体をよりよく見ることができることがわかりました。

于 2012-07-19T13:25:11.127 に答える
0

代わりにこれを使用してください。box-sizing:border-boxを使用すると、入力要素の外側ではなく内側からパディングが使用されます。

#left #frame form fieldset ul input {
position:relative
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box
}
于 2012-07-18T17:04:41.987 に答える
0

入力に追加box-sizing: border-boxします。(関連ベンダーには-moz-box-sizingとも追加)-webkit-box-sizing

于 2012-07-18T17:02:34.780 に答える
0

はい box-sizing:border-box; は良い解決策ですが、単純に入力ボックスのサイズを 7 ピクセル{左側のパディングの場合は 5 ピクセル、左右の境界線の場合は 2 ピクセル} に縮小するだけなので、入力ボックスの最終的な幅は 173 ピクセルになります。

于 2012-07-18T19:01:02.093 に答える