1

一部の div 要素のアウトラインで問題が発生しました。

私は次の構造を得ました。

<div id="skillcontent">
  <div id="skillname" class="inline">
   <div class="skilllist">
    <div><h3>[SKILL]</h3></div>
    <div><h3>[SKILL]</h3></div>
   </div>
  </div>

  <div id="skillstars" class="inline">
   <div class="skilllist">
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
   </div>
  </div>

  <div id="skillinfo" class="inline">
   <div class="skilllist">
    <div><h4>[YEARS],[LEVEL]</h4></div>
    <div><h4>[YEARS],[LEVEL]</h4></div>
   </div>
  </div>
 </div>

CSS:

.skilllist div {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 25px; /*same height as star images*/
}

div.inline {
    display: inline-block;
}

h3 {
    font-size: 18px;
    color: #5b5b5b;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #808080;
    margin: 0px;
}

img {
    vertical-align: bottom;
}

テキスト (h3 および h4) 要素を含む div は、画像を含む div よりも少し小さくなっています。どの要素にもマージンやパディングはありません。すべての div の高さは同じですが、テキストを含むクラス スキルリストの div の上にまだ空白があります。画像を含む div の上に空白はありません。これはなぜですか、どうすれば修正できますか?

例：クリック

4

6 に答える 6

1

vertical-align:top;すべてのアイテムの位置がずれている場合は、css に追加してみてください。テストページでfirebugを使用してこれを行ったときに機能しました。

于 2010-11-15T16:25:38.927 に答える
1

いくつかのこと：

  • HTML 要素を誤用しているようです: h3、h4などは見出し用です。
  • 一方で、あまりにも多くの div を使用しています。存在する他の多くの HTML 要素を検討してください。たとえば、「スキルリスト」と呼ぶ要素は、リスト ( ol、ul) であると叫びます。
  • このような小さなピクセル ギャップが気になる場合は、HTML/CSS は不適切なツールである可能性があります。HTML/CSS の全体的な概念は、柔軟性があり、異なるシステムで異なるレンダリングを可能にすることであり、ピクセル パーフェクトなデザイン ツールではありません。
  • デフォルトでは、画像はフォントのベースライン上にあり、ディセンダー用のスペースを残すインライン要素であることが原因である可能性があります。画像に設定vertical-align: bottomしてみてください。
于 2010-11-15T14:46:26.837 に答える
0

css を投稿したり、jsfiddle.net を設定したりできますか? そうでなければ、あなたの神性を正すのを助けるのは難しい..

//編集

ほら、マークアップを完全に修正しました：

<div id="skills">
<div class="skillA">
  <h3 class="skill">Skill A</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
<div class="skillB">
  <h3 class="skill">Skill B</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
</div>

そして、動作する ul li を持つ CSS

#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}

ここにフィドルのリンクがあります: http://jsfiddle.net/tobiasmay/gKrkS/

于 2010-11-15T14:16:23.350 に答える
0

CSS を見なければ、なんとも言えません。

すべての要素には、標準/ブラウザーによって提供されるデフォルトのスタイル設定があることを覚えておく必要があります。これを打ち負かすには、独自の値を明示的に定義する必要があります。

たとえば、ほとんどのブラウザでは、ページの背景のデフォルトの色が次のように定義されています。#FFFFFF

それを変えるには、あなた自身の価値を提供しなければなりません。

お役に立てれば。

于 2010-11-15T14:21:06.847 に答える
0

ブラウザーが h タグ (および p やその他のタグ) に自動的に追加する余白が原因である可能性があります。

css リセット スタイル シートを使用して、さまざまなブラウザーでレンダリングが異なる多くのデフォルトのマージンとパディングを削除すると役立つ場合があります。http://developer.yahoo.com/yui/3/cssreset/にあります

tobiasmay さんの意見に同意します。デモ ページなどがあると助かります。

于 2010-11-15T14:21:49.780 に答える
0

ルールにvertical-align: toporvertical-align: bottom (どちらか好きな方) を追加します。div.inlineこれにより、すべてのブラウザで動作します。

画像を含む div が他のものよりも少し高い位置にある理由は、インライン ブロックがそれらを含む行ボックスに配置される方法によるものです。

(...) [B]oxes は、含まれるブロックの上部から順に水平方向に配置されます。これらのボックスの間では、水平マージン、境界線、およびパディングが考慮されます。(...) 行を形成するボックスを含む長方形の領域は、行ボックスと呼ばれます。

(...)

ライン ボックスは常に、そこに含まれるすべてのボックスに対して十分な高さです。ただし、含まれている最も高いボックスよりも高い場合があります (たとえば、ベースラインが整列するようにボックスが配置されている場合)。ボックス B の高さがそれを含むライン ボックスの高さよりも小さい場合、ライン ボックス内の B の垂直方向の配置は、'vertical-align'プロパティによって決定されます。

太字部分に注意してください。のデフォルト値はvertical-alignですbaseline。例の画像は、行ボックス内で上に移動して、周囲のテキストのベースラインに揃えます。そうすることで、行ボックスの高さを増やし、テキスト div の上に余分な空白を残します。

それでも何が起こっているのかよくわからない場合は、例font-sizeの のを に増やして、固定のを から削除してみてください。h432pxheight.skilllist div

于 2010-11-16T17:20:17.783 に答える