防止從包裝，但允許內容包

直列塊到目前爲止，我有這個佈局：防止從包裝，但允許內容包

<ul style="white-space:nowrap;"> 
    <li style="width:200px; display:inline-block;"></li> 
    <li style="display:inline-block; vertical-align:top; padding-left:10px;"></li> 
</ul>

我已成功地阻止包裝這是一個開始ul。但是，第二個li中的內容將繼續不在屏幕上。重疊其父元素等

我需要第二個li佔用鬆弛和動態的寬度不像第一個li。我需要將文字包裹在第二張li內。

感謝您的任何幫助。

來源

2011-10-28 HGPB

你只需要禁用包裝的第一個列表項？你可以爲它設置'white-space：nowrap;'，而不是整個列表容器。 – unclenorton

第一個列表項中有一個圖像，第二個是文本。所以我只關心第二個列表項目換行。 – HGPB

李{顯示：表;}是你的朋友。

p.s.不要忘記刪除內聯樣式！

來源

2012-11-29 14:05:40 Timidfriendly

嘗試white-space: normal對li元素。

white-space默認爲繼承，所以他們從ul收到nowrap。

我開始認爲你使用的是ul針對div可能更適合佈局的目的：

<div class="Item"> 
<div class="ImageContainer"><img src="" alt="/></div> 
<div class="TextContainer">Text text text text text</div> 
</div> 

.Item { 
width: 200px; 
overflow: auto; 
} 

.ImageContainer { 
float: left; 
width: 40%; 
} 

.TextContainer { 
float: left; 
width: 60%; 
}

來源

2011-10-28 12:53:56 Bazzz

謝謝 - 它似乎只適用於我這個，如果我添加固定寬度。我真的不想給第二個李增加一個寬度。 – HGPB

你能指定你想要的嗎？因爲我開始認爲你可能使用'ul'來進行佈局，而不是製作一個列表。如果是這樣的話，也許一些浮動的div可能會更好地完成這項工作。 – Bazzz

第一個李擁有圖像第二個李應該保持包裝文本。第二個li可以根據屏幕分辨率進行增大和縮小。 – HGPB

聽起來像你可能實際上想要使用一個表。否則，如果您知道圖像的寬度，則向左浮動，並給下一個元素留下大於或等於圖像寬度的左邊距。

例如：

article > img { 
 
    float: left; 
 
    height: 80px; 
 
    width: 80px; 
 
} 
 
article > div { 
 
    margin-left: 90px; 
 
}

<article> 
 
    <img src="http://www.gravatar.com/avatar/7e6e0e2b73358e47e0b7f83f8111f75b"> 
 
    <div> 
 
    <h4>Matt Di Pasquale</h3> 
 
    <p>I know the width of the image is 80px, so I floated it left and gave the <code>div</code> a 90px left margin. That way, everything gets layed out perfectly, and this paragraph's text wraps.</p> 
 
    </div> 
 
</article>

來源

2015-09-02 00:07:14 ma11hew28

防止從包裝，但允許內容包

回答

相關問題