如何獲得一個跨度和輸入保持在同一行，並在受限div中滾動？

我想得到一個span和一個input留在同一行div的固定，以便div是可滾動的，如果溢出發生。如何獲得一個跨度和輸入保持在同一行，並在受限div中滾動？

這裏是我的嘗試：

下面是代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <style> 
    #main { 
     overflow-x: auto; 
     width: 30px; 
     border: 1px solid black; 
     display: inline-block; 
    } 
    </style> 
</head> 
<body> 
    <div id='main'> 
    <span>abc</span> 
    <span>efesf</span> 
    <input type='text'></input> 
    </div> 
</body> 
</html>

來源

2014-06-12 batman

不是溶液而是''是無效的HTML，它的''你在追求。 – GillesC

@gillesc，謝謝。指出。 – batman

我想，你應該只使用簡單的CSS的float &顯示的代碼。

span { float: left; display: block; width: 33%; } 
input { float: left; display: block; width: 33%;}

來源

2014-06-12 17:38:04 huncyrus

white-space: nowrap;是你所追求的:)

Jsbin example!

CSS

#main { 
    overflow: scroll; /* for CSS3 lacking browsers */ 
    overflow: scroll hidden; 
    width: 30px; 
    border: 1px solid black; 
    display: inline-block; 
    white-space: nowrap; 
} 
#main span, #main input { 
    display: inline-block; 
}

HTML

<div id="main"> 
     <span>abc</span> 
     <span>efesf</span> 
     <input type="text" /> 
</div>

來源

2014-06-12 17:39:23 misterManSam

雖然這是一個可行的解決方案，但問題是這不會完全跨瀏覽器兼容。例如，Firefox 30/win將不會顯示滾動條，所以你會失去任何溢出容器元素。不知道這是不是一個未知的FF錯誤，但也存在於以前的版本 – agrm

這是'overflow-x'嗎？我已經更新了我的答案。如果瀏覽器不支持CSS3規則，則瀏覽器會在x和y軸上接收滾動。支持CSS3的瀏覽器僅接收x軸滾動。這應該是跨瀏覽器兼容的:) – misterManSam

不幸的是，它不是'overflow-x'。 Firefox將按預期顯示內聯元素，但即使包含的元素將超過容器寬度，它（出於某種原因）也不會應用滾動條/滾動箭頭。它總是一個瀏覽器搞砸了，不是嗎？？ – agrm

你可能想牛逼他white-space: nowrap;規則。

假設你的跨度和輸入元件是display: inline：

#main { 
    white-space: nowrap; 
    overflow-x: scroll; 
}

來源

2014-06-12 17:42:46 totbar

如何獲得一個跨度和輸入保持在同一行，並在受限div中滾動？

回答

相關問題