Question

我的页面上有三个链接：

<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;



}

随着浏览器窗口大小变小，三个链接文本在某个时刻重叠，如何解决？我的意思是当浏览器窗口大小变小时如何使链接文本不重叠？

Answer 1

问题是

position: absolute;

并指定left属性。如果您想要连续的链接，请使用css作为

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

并在所有a中使用menuitem类，并在菜单结束后声明更清晰。

<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>

Answer 2

我认为这是你想要的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;



}

Answer 3

将您的链接更改为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/

文本重叠问题

3 个答案: