文本重疊問題

我有我的網頁上三個環節：文本重疊問題

<a class="contact" href="../contact.html" target="_blank">Contact</a> 
<a class="car" href="../car.html" target="_blank">Car</a> 
<a class="market" href="../market.html" target="_blank">Market</a>

我CSS他們如下：

a.car{ 
    font-size: small; 
    text-decoration: none; 
    position: absolute; 
    left: 20%; 
    right: 10%; 
    margin-top:10px; 
} 

a.market{ 
    font-size: small; 
    text-decoration: none; 
    position: absolute; 
    left: 20%; 
    margin-top:10px; 



}

隨着瀏覽器窗口大小變化較小，三個連桿文本得到overlaped在某個時候，如何解決這個問題？我的意思是如何讓瀏覽器窗口大小變小時鏈接文本不重疊？

來源

2011-06-17 Leem

你想實現什麼？ – DanielB 2011-06-17 11:06:10

@DanielB，我想解決這個問題，以便在瀏覽器窗口變小時鏈接文本不重疊 – Leem 2011-06-17 11:09:07

問題是

position: absolute;

並指定left屬性。如果你想在一排的鏈接，使用的CSS爲

a.menuitem { 
    float:left; 
    margin-left: 10px; 
} 
div.clearer { clear:both; }

，並使用菜單項類中的所有A和聲明後更清晰的菜單就結束了。

<a class="contact menuitem" href="../contact.html" target="_blank">Contact</a> 
<a class="car menuitem" href="../car.html" target="_blank">Car</a> 
<a class="market menuitem" href="../market.html" target="_blank">Market</a> 
<div class="clearer" ></div>

來源

2011-06-17 11:10:07

我想這是你想要的CSS ...

a.contact{ 
    font-size: small; 
    text-decoration: none; 

    margin-left: 20%; 
    right: 10%; 
    margin-top:10px; 
} 

a.car{ 
    font-size: small; 
    text-decoration: none; 


    right: 10%; 
    margin-top:10px; 
} 

a.market{ 
    font-size: small; 
    text-decoration: none; 


    margin-top:10px; 



}

來源

2011-06-17 12:32:54 Anish

從流體%更改鏈接display:block;，讓他們從聯繫人即可鏈接，然後改變你的position到靜態px像

a.car{ 
    font-size: small; 
    text-decoration: none; 
    position: absolute; 
    left: 100px; 
    margin-top:10px; 
    display:block; 
} 

a.market{ 
    font-size: small; 
    text-decoration: none; 
    position: absolute; 
    left: 30px; 
    margin-top:10px; 
    display:block; 
}

http://jsfiddle.net/jasongennaro/qAKvQ/

來源

2011-06-17 12:35:51

文本重疊問題

回答

相關問題