適當的方式來佈局錨點，圖像和div

我有一個外部容器，包含兩個鏈接。他們水平對齊。第一個包含一個帶背景圖像的div，第二個只是文本。問題是整個外部容器充當第一個錨，鏈接到第一個url，而它應該沒有鏈接。這裏是簡化的佈局適當的方式來佈局錨點，圖像和div

<div id="links-block">   
    <a href="http://www.google.com"><div id="edit-quote-button"></div></a> 
    <a href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a> 
</div>

這裏是JSFiddle的例子。我只是想知道如何構建這組元素，以防止這個問題。

來源

2013-07-29 Andrew Liu

在Chrome中適合我使用 – Cherniv

@Cherniv這很奇怪。我只使用了所有瀏覽器，只有IE能正常工作。 Chrome和Firefox有相同的問題 –

定義這個CSS

a{display:inline-block;vertical-align: top;} 
#preview-pdf-link { 
float: right; 
margin-top: -30px; // remove this line 
color: #999999; 
}

Demo

來源

2013-07-29 06:41:16

它似乎工作。但我只是不明白這行實際上是什麼 –

，因爲a是內嵌塊元素，你用來內部div div是一個塊級別的元素比我更改內嵌到行內塊元素的值比它的工作 –

更清晰http://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block –

這裏是你的新的HTML結構

<div id="links-block"> 
    <a class="g-link" href="http://www.google.com"><div id="edit-quote-button"></div></a> 
    <a class="y-link" href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a> 
    <div class="clear"></div> 
</div>

這個CSS添加到您的css文件

.g-link{ 
    display:block; 
    float:left; 
} 
.y-link{ 
    display:block; 
    } 
.clear{ 
    clear:both; 
    height:0px; 
    width:0px; 
    display:block; 
}

希望這會對你有用

來源

2013-07-29 06:49:42

是的，它也解決了我的問題，謝謝 –

在a之內有一個div是不是個好主意（在HTML5之前無效）。但是，如果將edit-quote-button div設置爲display: inline-block，它將會更好。然後刪除Yahoo鏈接上的負頂部邊距。

來源

2013-07-29 06:52:35

適當的方式來佈局錨點，圖像和div

回答

相關問題