Question

Given:

        <div class="pageNavWrap">
            <a class="pageLink" href="#">1</a>
            <a class="pageLink" href="#">2</a>
            <a class="pageLink" href="#">3</a>
            <a class="pageLink" href="#">4</a>
            <a class="pageLink" href="#">5</a>
            <a class="pageLink" href="#">6</a>
            <a class="pageLink" href="#">7</a>
            <a class="pageLink" href="#">8</a>
            <a class="pageLink" href="#">9</a>
            <a class="pageLink" href="#">10</a>
            <a class="pageLink" href="#">11</a>
            <a class="pageLink" href="#">12</a>
            <a class="pageLink" href="#">13</a>
        </div>

With:

.pageNavWrap{
    background-color:#666;
    text-align:center;
    font-size:16px;
    overflow-x:scroll;
}
a.pageLink{
    color:White;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
}

How can I stop the links overflowing downwards? I would like them to overflow-x only (already specified in CSS) so that the horizontal scroll bar comes into play.

Cheers!

Answer 1

you need to add

white-space:nowrap;

Browsers don’t all seem to agree about inheritance on this attribute so try adding it to both css rules.