如何使div在下面的代碼中內聯顯示？

-1

如何進行以下div的出現在下面的HTML內嵌滾動如何使div在下面的代碼中內聯顯示？

<div id="scrollable"> 
    <div class="childDiv"> 
     <div class="inner">I am the first div in first should appear inline with the rest of the text</div> 
     <div class="inner">I am the second div in first should appear inline with the rest of the text</div> 
    </div> 
    <div class="childDiv"> 
     <div class="inner">I am the first div in Second should appear inline with the rest of the text</div> 
     <div class="inner">I am the second div in Second should appear inlinewith the rest of the text </div> 
    </div>

這是我寫

#scrollable { 
     width : 50%; 
     height : 350px; 
     background-color: #d0e4fe; 
     overflow-x: scroll; 
     overflow-y: hidden; 

    } 
    .childDiv { 
     float: left; 

    } 
    .inner { 
     float : left; 
    }

來源

2014-07-26 John Doe

while the floating the element the'width' property required。 –

的CSS您可以使用display:inline-block;和white-space:nowrap;使div顯示在內並保持在同一行：

個

DEMO

Inline-block和內聯元素在它們之間具有空白渲染，

的空白CSS屬性用於描述如何空白在元件內部的處理。

nowrap：正常情況下會摺疊空白，但會抑制文本中的換行符（文字換行）。

（source: MDN）

CSS：

#scrollable { 
    width : 50%; 
    height : 350px; 
    background-color: #d0e4fe; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space:nowrap; 
} 
.childDiv { 
    display:inline-block; 
    white-space:nowrap; 
} 
.inner { 
    display:inline-block; 
}

來源

2014-07-26 12:14:15

感謝您的幫助。爲什麼你使用了空白：nowrap;只有可滾動的div和第一個子div。 –

@ user1590011爲我的答案增加了一些更多解釋。 –

所以說「display：inline」比「float：left」更嚴格。我的意思是float：如果當前行沒有更多空間，則left將佔用下一行。 –

你必須指定一個width上child element。沒有指定寬度，它將水平地包含塊。檢查DEMO。

因此在您的班級.childDiv和.inner中定義寬度。

.childDiv 
{ 
float: left; 
width : 50%; /*required to specify the width*/ 
background:red; /*just for visibility used here*/ 
padding:3px; 
} 
.inner { 
float : left; 
width : 50%; /*required to specify the width*/ 
}

來源

2014-07-26 12:18:57

如何使div在下面的代碼中內聯顯示？

回答

相關問題