Question

如何实现部分水平滚动？如小提琴中所示，滚动条已满100％，因此我无法看到最后几个元素。我有一个设定宽度的输入框，必须像给定的那样定位。但我希望滚动条在输入框之前结束。 https://jsfiddle.net/77ubr2ht/

html的格式就像 -

var objectArray = [obj1,obj2,obj3.........]

obj1 ={
2002-Edad 15 a 64 años: 0.1854095,
2003-Edad 15 a 64 años: 0.1531632,
2005-Edad 15 a 64 años: 0.1887739,
2006-Edad 15 a 64 años: 0.1754043,
2007-Edad 15 a 64 años: 0.2038664,
2008-Edad 15 a 64 años: 0.2270297,
2009-Edad 15 a 64 años: 0.211827,
2011-Edad 15 a 64 años: 0.2396887,
2012-Edad 15 a 64 años: 0.2618066,
2013-Edad 15 a 64 años: 0.2677819,
var_descripcion: "Asalariados con contrato a término fijo (en %)"}

obj2 ={
2002-Edad 15 a 64 años: 0.1854095,
2003-Edad 15 a 64 años: 0.1531632,
2005-Edad 15 a 64 años: 0.1887739,
2006-Edad 15 a 64 años: 0.1754043,
2007-Edad 15 a 64 años: 0.2038664,
2011-Edad 15 a 64 años: 0.2396887,
2012-Edad 15 a 64 años: 0.2618066,
2013-Edad 15 a 64 años: 0.2677819,
var_descripcion: "Asalariados con contrato a término fijo (en %)"}

Answer 1

在css中尝试此更改

ul {
    width: 430px;
    float:left;
    margin:0;
}

滚动条Demo

中的

input in scroller或输入框

改变css

#x {
background: cyan;
position:relative;

}

Answer 2

我做了一些改动。

https://jsfiddle.net/77ubr2ht/1/

在输入字段中使用position: fixed时，可以有效地从正常页面流中删除该元素，因此其他元素无法与其进行交互。我还将滚动区域的宽度设置为max-width: 100%。你有一个硬编码的宽度，这会阻止该元素扩展到页面长度。

Answer 3

我更改了您的html结构并使用css calc。

Jsfiddle

Answer 4

请检查这个工作小提琴。希望这将是你所期待的。

div {
    float: left;
    width: 100%;
    border: 2px solid pink;
    margin-top: 25px;
}
li {
    display: inline-block;
    border:1px solid green;
}

ul {
    width: 75%;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    float: left;
    box-sizing: border-box;
    margin: 0px;
}

#x {
    float: left;
    background: cyan;
}

<div>
<ul>
<li>oranges</li>
<li>apple</li>
<li>grapes</li>
<li>oranges</li>
<li>apple</li>
<li>grapes</li>
    <li>oranges</li>
<li>apple</li>
<li>grapes</li>
    <li>oranges</li>
<li>apple</li>
<li>grapes</li>
    <li>oranges</li>
<li>apple</li>
<li>grapes</li>
    <li>oranges</li>
<li>apple</li>
<li>grapes</li>
    <li>oranges</li>
<li>apple</li>
<li>grapes</li>
    <li>oranges</li>
<li>apple</li>
<li>grapes</li>

</ul>
<input type="text" placeholder="type something" id="x" />
    </div>

Answer 5

我希望这会有所帮助。我加了一堂课。

<ul>
    <li>oranges</li>
    <li>apple</li>
    <li>grapes</li>
    <li>oranges</li>
    <li>apple</li>
    <li>grapes</li>
    <li>oranges</li>
    <li>apple</li>
    <li>grapes</li>
    <li>oranges</li>
    <li>apple</li>
    <li>grapes</li>
    <li>oranges</li>
    <li>apple</li>
    <li>grapes</li>
    <li>oranges</li>
    <li>apple</li>
    <li>grapes</li>
    <li>oranges</li>
    <li>apple</li>
    <li>grapes</li>
    <li>oranges</li>
    <li>apple</li>
    <li>grapes</li>
    <li class="test"><input type="text" placeholder="type something" id="x"></li> 
</ul>

我还添加了这个CSS：

.test{
    display: block;
    margin-top: 10px;
}

如何获得这种水平滚动？

5 个答案: