CSS - 適合家長空間的100％？

我想在鏈接（href）標籤內創建一個跨度，我希望跨度佔用父鏈接元素的高度100％。我一直在嘗試與相對/絕對的位置，但沒有作品。CSS - 適合家長空間的100％？

實施例：

http://jsfiddle.net/dDZRj/

來源

2011-03-14 anonymous

你想要的結果究竟是什麼？如果你想得到我認爲你想要的東西，你必須設置一些不同的東西，但是如果沒有你想要的東西的清晰圖像，那隻會是猜測。 – Kyle 2011-03-14 13:28:44

@Kyle Sevenoaks我想實現將影響父鏈接元素並調整其大小的跨度。所以a的邊框看起來像是跨度邊框的輪廓，我不想在跨度和鏈接邊框之間留出空間。 – anonymous 2011-03-14 13:32:32

是這個嗎？

http://jsfiddle.net/dDZRj/11/

body { 
    margin: 25px; 
} 

.button { 
    margin: 5px; 
    color: #fff; 
    background: #999; 
    display: inline-block; 
    padding: 10px 0; 
    text-decoration: none 
} 

.button span { 
    padding: 10px; 
    border: solid 1px red; 
    width: 100%; 
} 

.big { 
    font-size: 2em; 
}

來源

2011-03-14 13:37:29 thirtydot

@thirtydot你是男人！它在我的網站槽上效果不佳，但我會弄清楚，可能是重寫.button或其他。通過他們的方式你做了什麼來強制它的工作？內聯塊是我所錯過的嗎？ – anonymous 2011-03-14 13:42:45

差不多。我添加的所有內容都是'display：inline-block'，我將'.button'上的填充改爲'padding：10px 0'，這意味着頂部和底部的'10px'，左邊和右邊的'0'。它在你的網站上有什麼問題？ – thirtydot 2011-03-14 13:44:46

@thirtydot，聖牛，這是一個艱難的，我粘貼確切的按鈕代碼（CSS/HTML）給JsFiddle，它看起來不錯，但在我的網站上它看起來不錯，只有寬度font-size：1em，跨度高度也是如果字體大小小於1em，則字體大小不足，如果字體大小大於1em，則它們會出現在a元素的「外部」。最糟糕的事情是螢火蟲顯示沒有什麼不尋常的。我在想線高度，但那不是重點。 – anonymous 2011-03-14 13:48:55

嘗試改變跨距：

display: block;

來源

2011-03-14 13:26:22 moleculezz

不好看：http://jsfiddle.net/dDZRj/3/ :) – anonymous 2011-03-14 13:27:41

測試在瀏覽器。

http://jsfiddle.net/loktar/dDZRj/4/

CSS

body { 
    margin: 25px; 
} 

.button { 
    margin: 5px; 
    color: #fff; 
    background: #999; 
} 

.button span { 
    border: solid 1px red; 
} 

.big { 
    font-size: 2em; 
}

標記

<a href="#" class="button"><span>Click me!</span></a> 

<a href="#" class="button big"> 
    <span>Click me!</span></a> 

<a href="#" class="button"> 
    <span>Click me!</span> 
</a>

來源

2011-03-14 13:28:23 Loktar

@Loktar，aff，它似乎很容易，但不是。在你的例子中最後一個跨度之後有一個空格： – anonymous 2011-03-14 13:31:16

@Loktar感謝@Rudu你的例子完美地工作！謝謝你們兩個！:) – anonymous 2011-03-14 13:33:39

另外我認爲這是世界的另一種方式，這裏'a'標籤調整它們大小到裏面的'span'。我認爲這個問題是相反的。 'span'應該調整到'a'的大小。嘗試給出一個'a'' display：inline-block'和一個大於'span'的固定寬度，並且'span'不會調整。 – Bazzz 2011-03-14 13:34:48

在Firefox中至少你需要我們的源代碼更改爲：

<a href="#" class="button"> 
    <span>Click me!</span></a> 

<a href="#" class="button big"> 
    <span>Click me!</span></a> 

<a href="#" class="button"> 
    <span>Click me!</span></a>

但除此之外，@ Loktar的CSS的偉大工程:)

來源

2011-03-14 13:32:11 Rudu

我恨討厭這個代碼空白html故障。謝謝！ – anonymous 2011-03-14 13:34:17

@anonymous這不是一個小故障，實際上在''和''之間有一個空白字符，即您用於在''之前縮進下一行的選項卡。 'a'和'span'是內聯元素，它們之間需要空格。 – Bazzz 2011-03-14 13:53:05

我認爲這是你是什麼之後，a可以在寬度任何規模大小和span將調整其大小相匹配。哦，還有填充。

http://jsfiddle.net/dDZRj/12/

來源

2011-03-14 13:39:54 Bazzz

CSS - 適合家長空間的100％？

回答

相關問題