Question

我的博客上有一个代码框，我在其中添加HTML / CSS / Javascript代码

我的CSS代码如下所示：

.post blockquote {
    background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tricks/Images/blockquote.png");
    background-position: 0 0;
    background-repeat: no-repeat repeat;
    border-color: #DDDDDD #666666 #666666 #DDDDDD;
    border-radius: 6px 6px 6px 6px;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    font-family: Consolas,'Courier New',Monaco,Courier,monospace;
    line-height: 18px;
    margin: 0 20px;
    overflow: hidden;
    padding: 10px 20px 10px 45px;
}

每当我添加一个大代码（单行）。代码到达下一行，但我希望代码在同一行，在框下面是水平滚动。我尝试过overflow: auto overflow-x: scroll overflow-y: hidden

Answer 1

在W3SCHOOLS上查看此live example。

正如您所看到的......您需要指定width和height ..这就是您的代码不起作用的原因

添加，使用：white-space: nowrap;，这样您就可以在一行中创建代码

请查看此jsfiddle代码

将水平滚动添加到代码框

1 个答案: