0

ここにどの情報を含めるのが適切かよくわからないので、寛大にお伝えします。ページの上部に、水平線があります。さて、この行の上、右下に、3 つの gif 画像で構成される多くの画像を配置したいと思います。画像は適切に右に揃えられますが、一番下までは行きません。以前、私は同じデザインを持っていましたが、CSS のみを使用して 3 つのボックスを作成し、魅力的に機能しました。画像は正確に幅 96 ピクセル、高さ 45 ピクセルです。これは、CSS が続く私の HTML です (私は 960 グリッド システムを使用しています)。

そうそう、私はすでに CSS で li に負のマージンを使用しようとしました。

<div class="grid_8">
            <ul>
                <a href="cv.html"><li></li></a>
                <a href="arbete.html"><li></li></a>
                <a href="index.html"><li></li></a>
            </ul>
</div>

ul {
list-style:none;
padding:0;
margin-top:50px;
}

li:first-child {
margin-right:-5px;
}

li {
background-image:url('bilder/meny_hem.gif');
float:right;
width:96px;
height:45px;
margin-bottom:0px;
padding-bottom:0px;
}

編集:これは私の新しいコードです。(?) 構文を修正しますが、問題は残ります。どんな感じか画像もご覧ください。

<ul>
    <li><a href="cv.html"></a></li>
    <li><a href="arbete.html"></a></li>
    <li><a href="index.html"></a></li>
</ul>

ul {
list-style:none;
padding:0;
margin-top:50px;
}

li:first-child {
margin-right:-5px;
}

li {
float:right;
width:96px;
height:45px;
}

a {
display:block;  
background-image:url('bilder/meny_hem.gif');
width:96px;
height:45px;
margin-bottom:0px;
padding-bottom:0px;
}

画像は最終行に整列​​しません。

4

3 に答える 3

0

提供したHTML、CSS、画像に基づいて、黒い線がどこから来ているのか100％わかりませんが、これが機能するソリューションです。

ここでのデモ：http：//jsfiddle.net/stGPz/

CSSに以下を追加しました。

ul {
    border-bottom:1px solid #000;
    height:45px; /* The height of your li */
}

それが機能しない理由を私が考えることができる他の唯一のことは、画像が45pxの高さであり、画像が45px全体をカバーしていることを確認することです。しかし、このソリューションはあなたに線を与え、その線に接するリスト項目を持っています。

于 2012-10-29T23:43:36.910 に答える
0

まず、これは有効な HTML ではありません。

<a href="cv.html"><li></li></a>

<a>の直接の子になることはできません<ul>。要素内にアンカー タグを配置する必要があります。<li>

<a>次に、要素がdisplay: block、幅と高さの属性を持ち、背景画像を取得するように CSS を変更します。要素は幅と高さの属性のみを<li>保持する必要があります。float: right

<li>要素と要素の両方のマージンとパディングをいじる必要があるかもしれません<a>。

于 2012-10-29T22:26:13.713 に答える
0

コンテナ div (grid_8) の下部に貼り付けたい場合は、次のように高さをボタンの高さとほぼ同じになるように調整する必要があります。

<div class="grid_8 container">
    <ul>
        <li><a href="cv.html">HEM</a></li>
        <li><a href="arbete.html">HEM</a></li>
        <li><a href="index.html">HEM</a></li>
    </ul>
</div>

.container{
    width:100%;
    height:50px;
    border-bottom:1px solid black;        
}

http://jsfiddle.net/pqV5E/29/

<ul>また、bottom:0; を使用して、コンテナーに対して絶対および相対にすることもできます。次のように底に貼り付けます。

ul {
    list-style:none;
    padding:0;
    position:absolute;
    bottom:5px; 
    right:0;
}

.container{
    width:100%;
    height:100px;
    position:relative;      
}

この最後のテクニックを使用する場合は、<ul>margin-top を必ず削除し、そのマージン値をコンテナーの高さに追加してください。

http://jsfiddle.net/pqV5E/28/

画像の代わりに角の丸いボタンを使用しましたが、好きな画像に切り替えることができます。

于 2012-10-29T23:48:44.770 に答える