永久性地設置相對放置物品的位置

enter image description here

當前選擇的菜單項是粗體斜體。設計師希望其他人在懸停時變成粗體斜體。發生這種情況時，會使該項目的文本變得更寬，從而將所有其他項目輕輕推下，因爲它們以固定邊距內聯顯示。我必須擺脫輕推。

解決此問題的正確方法是什麼？我有幾個想法使用javascript：

onload，將文本包裝在div中，並將每個div的寬度設置爲文本的寬度。
Onload，獲取每個菜單項相對於div的位置，然後將它們的位置設置爲絕對座標（因爲它們始終與導航div內的絕對位置相同）。

這兩個都顯得有些ha，，這是一個非常簡單的問題，所以我認爲必須有一個更簡單的方法。

我使用jQuery，如果它有所作爲。

下面是一個相當小的HTML頁面，將重現該問題：

<head> 
<style type="text/css"> 
    body { 
     background: black; 
     font-family: sans-serif; 
    } 
    a { 
     margin: 0px 20px; 
     font-size: 16px; 
     color: white; 
     text-decoration: none; 
    } 
    a:hover { 
     font-weight: bold; 
     font-style: italic; 
    } 
</style> 
</head> 

<body> 
    <a id="projectslink" href="#projects">Projects</a> 
    <a id="innovationslink" href="#innovations">Innovations</a> 
    <a id="newslink" href="#news">News</a> 
    <a id="aboutlink" href="#about">About</a> 
    <a id="contactlink" href="#contact">Contact</a> 
    <a id="breathlink" href="#">Breath*</a> 
</body>

來源

2012-01-16 John McDonnell

這裏是我的解決方案：

http://jsfiddle.net/pRhKF/10/

很明顯，你必須適應這種變化，要使它適合於自己的代碼。它使得所有的a都具有寬度，當文本通過一次粗體變粗體顯示出來，然後不加粗它們。不幸的是我還不得不使用hover事件綁定來實現鼠標滑過的效果，但也許你可以找到一個辦法解決這樣做......

來源

2012-01-16 01:00:27

@John：這確實意味着'：hover'狀態不適用於JavaScript禁用的用戶（儘管這些日子很少見）。 – PPvG 2012-01-16 06:23:28

哦對不起，我不習慣jsfiddle，我的解決方案修復了，但我不小心重新發布了Max's。我的解決方案使用CSS懸停：http://jsfiddle.net/jmcdon10/UdJZ5/ – 2012-01-16 07:36:37

我不認爲這是一個優雅的解決這個時候，老CSS問題...我能想到兩個「hackish的」 CSS的解決方案可供選擇：

給項目display: block-inline和固定寬度（em，當然，以防止字體縮放/縮放問題）。如果填充看起來一致，則寬度將因項目而異。
隱藏文字並替換爲圖像。

在我看來，你第一溶液（設置固定寬度onload）並不壞。它「感覺不錯」，不會與position混淆，並且至少比替代品更不容易。

爲了澄清，這是我將如何實現你的第一個解決方案：

HTML：沒有變化

CSS：沒有變化

的JavaScript：

$(function() {  
    $('a').each(function() { 
     var menuItem = $(this); 
     menuItem.css({ 
      'display': 'inline-block', 
      'width': menuItem.outerWidth(true), 
      'margin': 0, 
      'text-align': 'center' 
     }); 
    }); 
});

正如你所能請參閱：

無需將菜單項包裝在div中（只需從JS中設置display: block-inline）;
每個單獨的項目可以通過設置寬度與計算保持居中outerWidth()（包括餘量，填充和邊框寬度），清除margin和設置text-align到center。

現場示例on JSFiddle。

來源

2012-01-16 00:20:28 PPvG

+1用於暗示em避免縮放問題 – kinakuta 2012-01-16 00:32:44

我不完全確定，因爲您沒有包含代碼，但我不認爲解決方案1將解決此問題。要清楚，項目之間的空間需要固定，而我認爲不管固定項目的寬度如何，它將會有所不同。 – 2012-01-16 03:34:02

@John：要清楚，我的意思是你自己的解決方案編號1.我會在我的答案中澄清。 – PPvG 2012-01-16 05:21:40

個人而言，我想給我的資產淨值一些列表標記，然後給錨定體塊顯示屏，寬度：

http://jsfiddle.net/9AEnv/

我飄起了禮，但你也可以給他們一個顯示：內聯 - 如果你想避免浮動塊，

來源

2012-01-16 00:25:33 kinakuta

謝謝，但這並不完全解決我的問題，因爲項目之間的空間需要修復。 – 2012-01-16 03:24:26

如果我理解正確，你說的是項目之間的空間需要相同，而不是固定的。那是對的嗎？項目之間的空間在我的解決方案中得到了解決，但每個項目之間的空間並不相同，因爲每個項目的文本長度都不相同。 – kinakuta 2012-01-16 04:13:15

是的。以上使用JavaScript的Max Spencer解決方案就是我一直在尋找的東西（儘管在css中這樣做確實很棒）。 – 2012-01-16 04:52:25

對於後人，這是我結束瞭解決方案：http://jsfiddle.net/jmcdon10/UdJZ5/

主要基於@ Max的回答（本身就是我第一次提出的解決方案的改造），但是使用CSS懸停而不是jQuery的懸停事件綁定。

來源

2012-01-16 07:39:24

永久性地設置相對放置物品的位置

回答

相關問題