我怎樣才能讓我的跨度正確對齊，因爲我切換另一個元素？

在這個jsfiddle，我試圖創建一個DIV，當你點擊它的標題時它會展開和摺疊。標題位於頂部邊框上，幾乎就像是一個字形的圖例標籤。當箱子摺疊時，我希望DIV的頂部邊框保留。我怎樣才能讓我的跨度正確對齊，因爲我切換另一個元素？

如果你看看我的jsfiddle，你會發現它的功能非常好。但是，爲了達到此效果，必須關閉我的容器框的邊框。結果，我的標題內容向左移動。它們正在移動與外部DIV的左邊界寬度相同的像素量。

我已經嘗試了幾件事來彌補這一轉變，因爲我希望文本保持在同一位置，而頂部邊框仍保留在原始位置，但目前還沒有運氣。有沒有人有任何想法？

2012-07-18 carmenism

這一個讓傳說留在那裏，但削減的左邊和右邊的邊框：

.boxContainerHidden { 
    padding-left:  0px; 
    border:    2px solid transparent; 
    border-top-width: 0px; 
}

嘗試它：forked fiddle

這一個在它的位置讓傳說中的住宿，不切邊框：

.boxContainerHidden { 
    height:   1px; 
    border:   solid #ffffff; 
    border-width:  2px; 
    border-top-width: 0px; 
    border-bottom: 0px; 
}

嘗試太：forked fiddle

來源

2012-07-18 21:15:43 insertusernamehere

這就是我正在建議的。不要去除邊框，只需使其透明即可保持相同的像素尺寸。 – Chad 2012-07-18 22:15:13

這是真的，你的解決方案阻止文本移動。但是，我希望頂部邊框的大小相同並展開。現在它左右各有兩個像素短。我想要什麼？ – carmenism 2012-07-19 00:29:08

嘿，我已經用一個可能的解決方案更新了我的答案（希望我對你有幫助）。 – insertusernamehere 2012-07-19 08:16:04

我想如果你把文本放在#mdlFcstContent裏面。然後將跨度設置爲顯示：無;而不是做它的方式，你正在做它，您的問題將得到解決

<div id='mdlFcstContent'> 
    <span id='mdlFcstContent_span'> 
      Lorem ipsum dolor sit amet consectetuer venenatis vitae Nulla fringilla consequat. Wisi magnis volutpat auctor Nulla Vivamus id In elit dictumst mollis. Curabitur auctor consectetuer dui interdum neque Curabitur vel auctor tellus netus. Sed tincidunt condimentum semper Vestibulum sed tellus ridiculus elit In dictum. Turpis lacus pellentesque In ac volutpat mi non nibh vitae laoreet. Elit. 
    </span> 
</div>

那麼把它放進你的切換功能

var elem = document.getElementById('mdlFcstContent_span'); 
elem.style.display = "none";

編輯：我注意到，這些葉子底部邊框爲好，不知道這是否是一個交易破壞者。如果是這樣，而不是刪除邊界，只是將顏色設置爲透明

來源

2012-07-18 21:13:53

試試這個：

http://jsfiddle.net/EekzW/3/

您必須添加display:inline-block的跨度，因爲margin屬性不會在非塊元素工作

來源

2012-07-18 21:23:20 PitaJ

我想我沒有清楚地解釋我的問題。我希望頂部邊框顯示爲摺疊並展開的相同大小。現在由於左右邊界消失，每邊縮短了兩個像素。也許我想要的是不可能的。 – carmenism 2012-07-19 00:30:57

@insertusername給出了一個很好的答案，但我發現了另一個解決方案，我想我會發布太：forked fiddle

我通過在DIV處於摺疊狀態改變左邊框的寬度爲下boxTitle DIV SPAN的解決了這個問題。

編輯：這是我認爲最實際的解決方案。它允許您輕鬆地將邊框的寬度從2個像素改爲1個像素，而不會出現問題。

來源

2012-07-19 13:50:15 carmenism

我怎樣才能讓我的跨度正確對齊，因爲我切換另一個元素？

回答

相關問題