CSS Vertical Scrollbar问题 [英] CSS Vertical Scrollbar problem

问题描述

大家好，



我遇到了一个简单的CSS问题，但似乎无法找到解决办法！



我正在建立一个自定义分页系统（ex p1 - p2 - p3 - p4 - p5等）。



每个''页码''是LI，CSS为：

Hi All,

I am stuck on a simple CSS problem, but can''t seem to find a fix!

I am building a custom pagination system (ex p1 - p2 - p3 - p4 - p5 etc).

Each ''page number'' is a LI, with CSS as:

ul.simplePagerNav li
{
    display: block;
    float: left;
    padding: 10px;
    margin-bottom: 10px;
    font-family: georgia;
    font-size: 14px;
}

包含所有LI'的UL放在DIV内。



目前DIV的CSS是：

The UL containing all the LI''s are placed inside a DIV.

The DIV''s CSS at the moment is:

<pre lang="css">#startSimplePagerNav
        {
            overflow: auto;
            width: 500px;
            height: 70px;
            white-space: nowrap;
        }</pre>

然而，我想要实现的是拥有所有LI'这是一个长排，只有一个水平滚动条，这样用户可以左右滚动查看不同的页码，而不是上下。



此刻，DIV中的文字垂直向下，滚动条出现在右边。



目前：

p1 - p2 - p3 - p4 -

p5 - p6 - p7 - p8



我想要什么：

p1 - p2 -p3 - p4 - p5 - p6 - p7- p8





有人可以帮忙吗？

However, what I would like to achieve, is to have all the LI''s in a long row, with a horizonal scrollbar only, so that users can scroll left and right to see the different page numbers, and not up and down.

At the moment, the text in the DIV runs down vertically, with the scrollbar appearing on the right.

Currently:
p1 - p2 - p3 - p4 -
p5 - p6 - p7 - p8

What I would like:
p1 - p2 -p3 - p4 - p5 - p6 - p7- p8


Can anybody help, please?

推荐答案

这在IE8中对我有用：

This works for me in IE8:

.nav-holder
{
  overflow-x: auto;
  white-space: nowrap;
  width:100px;
}

.nav-item
{
      display: inline-block;
      width: 25px;
      white-space: normal;
}

<div class="nav-holder">
      <ul>
              <li class="nav-item">p1</li>
              <li class="nav-item">p2</li>
              <li class="nav-item">p3</li>
              <li class="nav-item">p4</li>
              <li class="nav-item">p5</li>
              <li class="nav-item">p6</li>
              <li class="nav-item">p7</li>
              <li class="nav-item">p8</li>
              <li class="nav-item">p9</li>
      </ul>
</div>

我不确定其他浏览器在工作中并且无法访问它们，但我相信这应该可行。

Not sure about other browsers as I''m at work and don''t have access to them, but I believe this should work.

这篇关于CSS Vertical Scrollbar问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！