# 力量水平扩张[英] Force horizontal expansion

### 问题描述

```[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]
<---->scroll
```

```[ ][ ][ ][ ]
[ ][ ][ ][ ]
```

```<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;">
<div style="width: auto;">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div>
</div>

.box{
width: 100px;
height: 100px;
border: solid 1px black;
float:left;
display: inline-block;
}
```

## 推荐答案

```.box{
width: 100px;
height: 100px;
border: solid 1px black;
display: inline-block;
}

.box {display: inline !ie7;} /* to make it work in IE7 and below */
```

white-space: nowrap在内部div

```<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;">
<div style="width: auto; white-space: nowrap">
etc..
```

## 其他推荐答案

```<div style="width: 200px; height: 100px; overflow: scroll; white-space: nowrap">
FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO
FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO
<span id="a1">BAR!</span>
FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO FOO
</div>
<a href="#a1">scroll to bar (HTML anchor)</a>
<input type="button" value="scroll to bar (JS scrollIntoView)" />
<input type="button" value="scroll to bar (JS scrollLeft)" />

<script type="text/javascript">
var a1= document.getElementById('a1');
var buttons= document.getElementsByTagName('input');

buttons[0].onclick= function() {
a1.scrollIntoView();
};
buttons[1].onclick= function() {
a1.parentNode.scrollLeft= a1.offsetLeft;
};
</script>
```