HTML CSS按鈕定位

我有一個頭div的4個按鈕。我已經把它們全部放在頂部並留在CSS中，所以它們在一行中都是彼此相鄰的。沒有什麼花哨。HTML CSS按鈕定位

現在我試圖做一個動作，當按鈕按下按鈕文本向下移動一點。

我使用這個代碼在CSS：

#btnhome:active{ 
    line-height : 25px; 
}

HTML：

<div id="header">   
     <button id="btnhome">Home</button>   
     <button id="btnabout">About</button> 
     <button id="btncontact">Contact</button> 
     <button id="btnsup">Help Us</button>   
     </div>

按鈕CSS例子：

#btnhome { 
    margin-left: 121px; 
    margin-top: 1px; 
    width: 84px; 
    height: 45px; 
    background: transparent; 
    border: none; 
    color: white; 
    font-size:14px; 
    font-weight:700; 
}

而且這些按鈕在頭背景的工作，我肯定它與這些設置有關：

#header { 
    background-image: url(images/navbar588.png); 
    height: 48px; 
    width: 588px; 
    margin: 2em auto; 
    }

它運行良好，但唯一的問題是，所有其他按鈕也將文本向下移動？這是爲什麼？我是否明確說明我只想使用#btnhome？所有的按鈕都有完全不同的ID。除邊距外，所有按鈕都具有相同的CSS設置。我需要編輯什麼？

非常感謝。

來源

2012-12-21 user1880779

您可以顯示其他按鈕的HTML。我同意你的CSS看起來應該只適用於一個ID爲btnhome –

的項目我認爲這可能是因爲你設置了行高，因此整個DOM被壓低。但我們需要確認HTML。個人而言，我只是使用'margin-top：25px' – kennypu

缺少代碼是通向黑暗的一面。缺乏代碼會導致憤怒......憤怒導致仇恨......仇恨導致痛苦...... – brezanac

如我所料，是的，這是因爲wh ole DOM元素被推下來。你有多個選項。你可以把按鈕放在不同的div中，並且它們不會互相影響。更簡單的解決方案是將:active按鈕設置爲position:relative;並使用top而不是邊距或行高。示例小提琴：http://jsfiddle.net/5CZRP/

來源

2012-12-22 00:10:39 kennypu

你是對的，謝謝！ – user1880779

使用邊距而不是行高，然後將浮點數應用於按鈕。默認情況下，它們顯示爲inline-block，所以當一個人被推下時，洞線被推下來。浮動修復了這個：

#header button { 
    float:left; 
}

這裏的工作jsfidle。

來源

2012-12-21 23:58:59 nienn

是的，我做到了，同樣的事情發生..這就是爲什麼我試着用lineheight替代首先... – user1880779

編輯我的答案。 – nienn

嘗試改變該行高度變化的邊距或填充頂部的變化，而不是

#btnhome:active{ 
margin-top : 25px; 
}

編輯：您也可以嘗試添加該按鈕內的跨度

<div id="header">   
    <button id="btnhome"><span>Home</span></button>   
    <button id="btnabout">About</button> 
    <button id="btncontact">Contact</button> 
    <button id="btnsup">Help Us</button>   
</div>

然後風格，

#btnhome span:active { padding-top:25px;}

來源

2012-12-21 23:59:32

我試過了，也檢查了更新的問題，它還有一個更有價值的線索！ – user1880779

我已經嘗試了跨度和你的代碼，但沒有發生任何事情。然後我嘗試了線高度和跨度方式：並且仍然移動了按鈕上的所有文本。 '#btnhome span：active {line-height：25px;}' – user1880779

[type=submit]{ 
    margin-left: 121px; 
    margin-top: 19px; 
    width: 84px; 
    height: 40px; 
    font-size:14px; 
    font-weight:700; 
}

來源

2015-04-23 08:56:20

HTML CSS按鈕定位

回答

相關問題