如何获得这种水平滚动？

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

格式是这样 -

<ul> 
<li></li>....<li></li> 
<input type="text"> 
</ul>

来源

2015-11-13 anand patil

试试这个https://jsfiddle.net/nxs5pa1q/ – Kishan

@Kishan - 用户将不得不滚动看到输入框。这应该固定在主ul的右侧 –

尝试在CSS这种变化

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

Demo或滚动输入框中input in scroller

在CSS变化

#x { 
background: cyan; 
position:relative; 

}

来源

2015-11-13 10:49:17 Kishan

我做了一些更改。

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

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

来源

2015-11-13 10:53:24 ecc

在您的解决方案中，输入框位于顶部。我希望输入框部分的“ul”和滚动条滚动高达75-80％的宽度（就在输入框前） –

我改变您的html结构和使用css calc。

Jsfiddle

来源

2015-11-13 10:55:33 Alex

HTML不能更改:(我只是想调整CSS，如果有必要添加jQuery/JS –

@anandpatil注意到，我会用其他解决方案解决。 – Alex

@anandpatil是否有可能将所有'li'包装在'div'中： – Alex

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

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>

来源

2015-11-13 11:02:30

谢谢！HTML无法更改。我曾尝试过此更早:) –

您可以使用某些脚本包裹ul与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> 
    <li class="test"><input type="text" placeholder="type something" id="x"></li> 
</ul>

我也添加了这个CSS：

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

来源

2015-11-13 11:22:36

如何获得这种水平滚动？

回答

相关问题