0

画像とリンクが垂直方向に整列するように、次を整列するにはどうすればよいですか? また、連続する行の間隔を広げるにはどうすればよいですか?

<li><img src="c.png" alt="Centern | Karta"/> <a href="centern.php">Centern</a> </li>

<li><img src="fi.png" alt="Feministiskt initiativ | Karta"/><a href="feministiskt.php">Feministiskt initiativ</a> </li>
4

2 に答える 2

1

アライメントの意味がよくわかりません。ここでフィドルを設定しました：http://jsfiddle.net/GX5k6/

/* this takes care of the alignment of the text and images */
li a {
    display: block;
    line-height: 32px;
    float: left;
    padding-left: 5px; /* spacing between image and text */
}
li img {
    display: block;
    float: left;    
}
li {
    clear: both;
    overflow: hidden;    
}
/* spacing between lines */
li {
   margin-bottom: 5px;   
}

画像のスタイリングやコンテンツを検討するかどうかに応じて、ページの印刷時にそれらを表示する場合は、@petar が提案する背景画像にすることを実際に検討する必要があります。

于 2012-08-18T22:10:42.513 に答える
1

画像を背景として配置できます。

HTML

<li><a class='centern' href="centern.php" title="Centern | Karta">Centern</a> </li>

CSS

a.centern {
    background: url('c.png') no-repeat;
    height:20px; //height of the link
    width:100px; //width of the link
    padding-left:40px //give some space for the background image
}
于 2012-08-18T22:04:07.007 に答える