Question

如果浏览器太窄而无法适应它们，我希望有一行div（单元格）不会换行。

我搜索了Stack，但找不到我认为应该是一个简单的CSS问题的工作答案。

单元格指定了宽度。但是我不想指定行的宽度，宽度应该自动为其子单元格的宽度。

如果视口太窄而无法容纳行，那么div应该会溢出滚动条。

请提供您的答案作为工作代码段，因为我已经尝试了很多我在其他地方看到的解决方案（例如指定宽度：100％，它们似乎不起作用）。

我正在寻找一个只有HTML / CSS的解决方案，没有JavaScript。

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}

<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

目前，我实际上将行的宽度编码为非常大的数字。

Answer 1

CSS属性display: inline-block旨在满足这一需求。你可以在这里阅读一下：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

以下是其使用示例。关键要素是row元素具有white-space: nowrap而cell元素具有display: inline-block。此示例适用于大多数主流浏览器;此处提供了兼容性表格：http://caniuse.com/#feat=inline-block

<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>

Answer 2

您希望在行上定义min-width，因此当浏览器重新调整大小时，它不会低于该值并进行换行。

Answer 3

在阅读John的回答后，我发现以下似乎对我们有用（不需要指定宽度）：

<style>
.row {
    float:left;
    border: 1px solid yellow;
    overflow: visible;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
</div>

Answer 4

我设法做到这一点的唯一方法是在父元素上使用overflow: visible;和width: 20000px;。没有办法用我知道的CSS级别1来做这件事，我拒绝认为我必须全力以赴地使用CSS级别3.下面的例子有18个菜单超出了我的1920x1200分辨率LCD，如果您的屏幕较大，只需复制第一层菜单元素或只调整浏览器大小。或者，如果浏览器兼容性稍低，您可以使用CSS3媒体查询。

以下是完整的复制/粘贴示例演示......

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Menu Demonstration</title>
<style type="text/css">
* {border: 0; box-sizing: content-box; color: #f0f; font-size: 10px; margin: 0; padding: 0; transition-property: background-color, background-image, border, box-shadow, color, float, opacity, text-align, text-shadow; transition-duration: 0.5s; white-space: nowrap;}
a:link {color: #79b; text-decoration: none;}
a:visited {color: #579;}
a:focus, a:hover {color: #fff; text-decoration: underline;}
body {background-color: #444; overflow-x: hidden;}
body > header {background-color: #000; height: 64px; left: 0; position: absolute; right: 0; z-index: 2;}
body > header > nav {height: 32px; margin-left: 16px;}
body > header > nav a {font-size: 24px;}
main {border-color: transparent; border-style: solid; border-width: 64px 0 0; bottom: 0px; left: 0; overflow-x: hidden !important; overflow-y: auto; position: absolute; right: 0; top: 0; z-index: 1;}
main > * > * {background-color: #000;}
main > section {float: left; margin-top: 16px; width: 100%;}
nav[id='menu'] {overflow: visible; width: 20000px;}
nav[id='menu'] > ul {height: 32px;}
nav[id='menu'] > ul > li {float: left; width: 140px;}
nav[id='menu'] > ul > li > ul {background-color: rgba(0, 0, 0, 0.8); display: none; margin-left: -50px; width: 240px;}
nav[id='menu'] a {display: block; height: 32px; line-height: 32px; text-align: center; white-space: nowrap;}
nav[id='menu'] > ul {float: left; list-style:none;}
nav[id='menu'] ul li:hover ul {display: block;}
p, p *, span, span * {color: #fff;}
p {font-size: 20px; margin: 0 14px 0 14px; padding-bottom: 14px; text-indent: 1.5em;}
.hidden {display: none;}
.width_100 {width: 100%;}
</style>
</head>

<body>

<main>
<section style="height: 2000px;"><p>Hover the first menu at the top-left.</p></section>
</main>

<header>
<nav id="location"><a href="">Example</a><span> - </span><a href="">Blog</a><span> - </span><a href="">Browser Market Share</a></nav>
<nav id="menu">
<ul>
<li><a href="" tabindex="2">Menu 1 - Hover</a>
<ul>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
</ul>
</li>
<li><a href="" tabindex="2">Menu 2</a></li>
<li><a href="" tabindex="2">Menu 3</a></li>
<li><a href="" tabindex="2">Menu 4</a></li>
<li><a href="" tabindex="2">Menu 5</a></li>
<li><a href="" tabindex="2">Menu 6</a></li>
<li><a href="" tabindex="2">Menu 7</a></li>
<li><a href="" tabindex="2">Menu 8</a></li>
<li><a href="" tabindex="2">Menu 9</a></li>
<li><a href="" tabindex="2">Menu 10</a></li>
<li><a href="" tabindex="2">Menu 11</a></li>
<li><a href="" tabindex="2">Menu 12</a></li>
<li><a href="" tabindex="2">Menu 13</a></li>
<li><a href="" tabindex="2">Menu 14</a></li>
<li><a href="" tabindex="2">Menu 15</a></li>
<li><a href="" tabindex="2">Menu 16</a></li>
<li><a href="" tabindex="2">Menu 17</a></li>
<li><a href="" tabindex="2">Menu 18</a></li>
</ul>
</nav>
</header>

</body>
</html>

Answer 5

我有一个类似的问题，其中有界区域由float中的图像组成：左侧块和非浮动文本块。该区域具有流体宽度。根据设计，文本将沿着图像的右侧包裹起来。问题是，文本以＆lt; h2＆gt;开头。标签，其中第一个单词是“From”。当我将窗口调整为较小的宽度时，非浮动文本在某个宽度范围内只会在环绕区域的顶部留下单词“From”，其余文本已被挤压到浮动的下方块。我的解决方案是通过使用此代码替换其后面的空格来使标记的第一个单词更大，＆lt; span style =“opacity：0;”＆gt; x＆lt; / span＆gt; 。效果是制作第一个单词，而不是“From”，“FromxNextWord”，其中“x”，看不见，看起来像一个空格。现在我的第一个字很大，不会被文本块的其余部分抛弃。

Answer 6

对我来说（使用bootstrap），唯一有效的方法是在 last 单元格上设置display:absolute;z-index:1。

阻止浮动div包装

6 个答案: