得到的東西一個div外

嗯，我不知道如何用語言問這個，所以我會張貼圖片：得到的東西一個div外

enter image description here

所以圖像中，有一個主要的div，讓我們叫它「紅」。

內「紅」還有另一個div稱爲：「綠色」

內部「綠色」有一個ul，一些li元素，他們應該有一個底線，但底線必須離開div，因此我遇到的問題是在「綠色」之外獲得該行，當在代碼中時，它在裏面。

我猜可能有某種溢出設置或某種技術來實現這一點，也許它比我想象的容易，但我無法弄清楚。

總結起來，我需要從一個div內取得某些東西，然後讓它顯示出來。

我試圖儘可能多的谷歌，但我找不到任何工作對我來說，也許是因爲我甚至不知道如何問。

來源

2012-11-26 Xeinnex

你試過'overflow：可見;'和'left ：-50px'？ – looper

在此示例中爲所有元素髮布CSS。我認爲這與你定位綠色div的方式有關。因爲通常情況下它不應該是這樣的。 – AlexKey

@looper好的事情是，-50會是動態的，所以我想使用像-999這樣的非常大的值，但是我認爲可能有更好的方法，邊界也在li項目上，所以如果我應用左邊：-50，它也會移動文本。 – Xeinnex

這取決於情況。如果它是固定尺寸的元素，並且它們始終是相同尺寸，則無論您可以做什麼：位置red div爲relative，然後green div爲absolute和ul也是絕對的。這將允許您移動元素。相對於紅色的div。如果是拉伸元素取決於窗口的大小，這是很難，margin-left,margin-top和float:left會做的伎倆，但你應該非常小心，因爲它是很難做出跨瀏覽器。

來源

2012-11-26 08:06:11 AlexKey

所以你會推薦使用手動線而不是邊框？我真的不想將文字移出div，我只想邊框一直走到左邊。 – Xeinnex

@Xeinnex嗯，下劃線應該與文本對齊，所以它應該將文本包裝爲元素，或者將CSS作爲元素的一部分。因此無論如何你都應該將元素移動到綠色框外。 – AlexKey

是的，所以我想爲該行創建一個新的元素將是最好的選擇，而不是在li上使用邊框，我希望li的文本部分在其框中正常呈現。 – Xeinnex

-1

使用「overflow：hidden」（css）for green div

來源

2012-11-26 07:54:04

它似乎有些人倒退了問題，它不是我想要刪除溢出，我想要做的是創建一個溢出。 – Xeinnex

不，這會渲染下劃線，即使它會正確地溢出「綠色」div，看不見。 – 11684

你不能用溢出來解決這個問題。你需要做的是讓綠色內部的ul設置爲position: absolute，紅色框爲position: relative。

我爲它做了一個jsfiddle（我的第一個）。

來源

2012-11-26 08:15:13 Henrik

哈哈，正是我之前說過的：P – AlexKey

唯一的問題是，我不能使用這樣的文本縮進，因爲距離可能會改變。 – Xeinnex

看到演示按照您的要求： - DEMO

HTML

<div class="red"> 
<div class="green"> 
    <ul> 
    <li>loreum</li> 
    <li>loreum</li> 
     <li>loreum</li> 
    <li>loreum</li> 
    </ul> 
    </div> 

</div>

CSS

.red { 
width:300px; 
height:300px; 
background:red; 
} 

    .green { 
     float: right; 
     height: 200px; 
     margin: 30px 30px 0; 
     width: 200px; 
    background:green; 
    } 

    .green ul { 
     left: 8px; 
     margin: 0; 
     padding: 0; 
     position: absolute; 
     width: 200px; 
    } 

    .green ul li { 
    list-style-type:none; 
    display:block; 
    border-bottom:1px solid white; 
     text-align:right; 
    }

來源

2012-11-26 09:05:07

得到的東西一個div外

回答

相關問題