html - CSS スタイルが本来の動作をしていない

Question

HTML を書き始めた私の最初の試みは、あまりうまくいっていません。私は通常、物事を行う方法を見つけることに非常に長けていますが、この場合、与えられた解決策は機能していません.

これが私の最新のヘッドスクラッチャーです：

<div style="margin-top: 9px; margin-bottom: 9px; float: right; width: 55.45%;">
    <div id="home" class="button-style" style="width: 4px; float: left;">
        <a href="_blank"></a>
    </div>
    <div id="options" class="button-style" style="width: 4px; float: right;">
        <a href="_blank"></a>
    </div>  
    <div id="settings" class="button-style" style="width: 4px; margin-left: auto; margin-right: auto;">
        <a href="_blank"></a>
    </div> 
</div>

インラインスタイルを許してください。その場で編集できます。

上記は<div>2 つのフローターの間の 3 番目を中央に配置する必要がありますが、私はそれを機能させることができません。外側のコンテナが正しく引き伸ばされ、「ホーム」と「オプション」の分割も正しく配置されます。しかし、「設定」は「ホーム」に突き合わされています。

これは、うまくいかないことの一例にすぎません。その他には、垂直方向の中央揃え (ほとんどすべての方法) や、メディアクエリに応じた垂直方向の順序の再配置が含まれます。Chrome と IE10 でコードをテストしたので、コードに問題があることは確かですが、見つけることができません。

最適なデバッグツールは何ですか? 現在、どのスタイルが適用されているかを表示するため、Chrome のビルトインエレメントビューアを使用しています。しかし、それだけでは十分に強力ではありません。
入力時に結果を表示するビジュアル IDE はありますか? 「Netbeans」と「chrome」を切り替えるのは時間の無駄です。ここで、PHP のコーディングも行っているため、どの IDE もサーバーで動作する必要があることに注意してください。
表示されている問題の原因は何ですか? スタイルがないのか、それとも要素のサイズに関係があるのでしょうか?
後で見つけにくいバグを引き起こす可能性がある、チェーンのさらに上流にあるスタイルを確認する必要がありますか?

前もって感謝します

更新: 回答が見つかりました。同様の問題を抱えている人が役に立つと思う場合に備えて、ここに投稿しています。包含<div>自体はで配置されていfloat: right;ます。何らかの理由で、含まれているアイテムが影響を受けます。誰かが私が喜んでそれを受け入れる理由を説明する答えを書きたいと思ったら. センターアイテムに追加float: none;すると、問題が修正されました。

score 2 · Accepted Answer

div の幅を 33.33% に設定し、次のように単純化できます。

HTML

<div id="container">
    <div id="home" class="button-style">
        <a href="#" target="_blank">home</a>
    </div>
    <div id="options" class="button-style">
        <a href="#" target="_blank">options</a>
    </div>
    <div id="settings" class="button-style">
        <a href="#" target="_blank">settings</a>
    </div>
</div>

CSS

#container {
    margin: 9px 0px;
    float: right;
    width: 55.45%;
    border:1px solid red;
    position:relative;
}
#container>div {
    float:left;
    width:33.33%;
    *width:33%; /* fix for IE7 rounding bug */
    text-align:center;
}
#container>div:hover {
    background-color: #fdd;
}
#container a {
    text-decoration:none;
    display:inline-block;
    *display:inline; zoom:1; /*IE7 fix for inline-block */
    width:100%;
}

JSFiddle : http://jsfiddle.net/CMtQS/2/

score 0 · Accepted Answer

3 番目の div に位置 CSS 属性を使用してみてください。自動マージンが必要だと言いましたが、配置する場所ではありません。

例えば：

<div id="settings" class="button-style" style="width: 4px;position:absolute; left:10px; margin-left: auto; margin-right: auto;">

自分の都合に合わせて属性を指定してみてください

score 0 · Accepted Answer

まず最初に。1.あなたのコードが整列していないことについて

これを達成しようとしていますかここに画像の説明を入力

はいの場合は、次のコードを試してください

<div style="margin-top: 9px; margin-bottom: 9px; float: right; width: 55.45%;height: 10px;">
            <div id="home" class="button-style" style="width: 4px; float: left;height:10px; background: blue;">
                <a href="_blank""></a>
                </div>
                <div id="options" class="button-style" style="width: 4px; float: right; height: 10px; background: green;">
                <a href="_blank"></a>
            </div>  
            <div id="settings" class="button-style" style="width: 4px; margin-left: auto; margin-right: auto; background: green; height:10px;">
                <a href="_blank"></a>
            </div>

高さが自動のままになる可能性があるため、必ずコンテンツを追加し、スタイルから高さを削除してください。

1 つの div が左に浮いていて、1 つが右に浮いていて、1 つがまったく浮いていない理由がわかりません。
div がフローティングしている場合は、幅を修正し (すでに修正済みです)、高さを auto に設定して自動的に調整する必要があります。

4 最後にあなたの質問: i. 最適なデバッグツールは何ですか? 現在、どのスタイルが適用されているかを表示するため、Chrome のビルトインエレメントビューアを使用しています。しかし、それだけでは十分に強力ではありません[Firefox と Firebug を一緒に使用して、コードをオンザフライでデバッグできるようにしてください] ii. 入力時に結果を表示するビジュアル IDE はありますか? 「Netbeans」と「chrome」を切り替えるのは時間の無駄です。ここで、私は PHP もコーディングしているため、どの IDE も私のサーバーで動作する必要があることに注意してください[Firebug 自体が、javascript 内で同じことを行うのに役立ちます (php についてはわかりません)] iii. 表示されている問題の原因は何ですか? スタイルがないのか、それとも要素のサイズに関係があるのか[ここで行う必要があるのは、要素が空の場合は高さを固定すること、または要素に何かが含まれている場合は高さを自動に設定することです。要素にテキストが含まれていると仮定します]

そして最も重要なことは、position:absolute を避けることです。これにより、異なるブラウザーでずれが発生することがあります

score 0 · Accepted Answer

CSS フロートを使用して要素を並べ替えたい場合は、それらを正しく並べて、すべて同じ側にフロートする必要があります。

<div id="home" class="button-style" style="width: 4px; float: left;">
    <a href="_blank"></a>
</div>
<div id="settings" class="button-style" style="width: 4px;float: left; text-align:center">
    <a href="_blank"></a>
</div> 
<div id="options" class="button-style" style="width: 4px; float: left;">
    <a href="_blank"></a>
</div>

3 番目は、他の 2 つの間の中央に配置されます。

score 0 · Accepted Answer

HTML の順序を変更する必要があります。例を次に示します。

デモ http: http://jsfiddle.net/kevinPHPkevin/UKL4B/2/

<div id="wrapper" style="margin-top: 9px; margin-bottom: 9px; float: right; width: 55.45%;">
    <div id="home" class="button-style" style="width: 4px; float: left;">
        <a href="_blank">1</a>
    </div>
    <div id="options " class="button-style " style="width: 4px; float: right; ">
        <a href="_blank ">3</a>
    </div>  
    <div id="settings " class="button-style " style="width: 4px; margin-left: auto; margin-right: auto; ">
        <a href="_blank ">2</a>
    </div> 
</div>

この例では: 最初の div は左にフロートし、2 番目の div は右にフロートし、次に 3 番目の div がギャップを埋めます (スペースがある場合)。それが HTML の仕組みです。

CSS と HTML をデバッグするための優れたツールは、Google 開発ツールのgoogle chrome. JavaScript をデバッグするには、firebug をオンにすることをお勧めしますfirefox

score 0 · Accepted Answer

0

text-align: center;

中央のdivで問題を解決しているようです。

フィドル

于 2013-08-17T15:12:11.690 に答える

html - CSS スタイルが本来の動作をしていない

7 に答える 7

Related

Reference