Html &引用；溢出-x：自动；没有发挥应有的作用

我正在尝试使用

overflow-x:auto

，但它没有正常工作。如果没有滚动条可见，则显示水平滚动条

垂直滚动条（

overflow-y

）工作正常，但水平滚动条（

overflow-x

）工作不正常。这是链接。

您正在使您的

#容器1

大于100%。将其更改为以下内容：

#container1 {
  width: 100%;
  padding: 10px 0;
}

---

这里有一些小的变化，需要在您的类，以使它的工作，如您所期望的

.container_row
{
    width: 100%;
    white-space: nowrap;
    display: inline-block;
    margin: 0 auto;
}
#name_label 
{
    list-style: disc inside;
    margin-left: 10px;
    float: left;
    color: white;
    display: list-item;
    width: 50%;
}
#name_text
{
    color: white;
    padding-left: 5px;
    width: 50%;
    display: inline;
}

已更新

---

检查这个

Hi your overflow-x:auto look fine:create scroll，因为body width=1000pxHi@ALWAN，是的，我现在知道了。还有什么办法可以实现吗？是的，它删除了不必要的水平滚动条，但它将内容移动到了新行。嗨@Hitesh，它工作了，但有一个小问题。如您所见，在原始JSFIDLE中，id

name\u label

和

name\u text

的内容之间有一个固定的空格。但在您的JSFIDLE中，它并不存在。我不想失去它。我需要一个固定的空间。我们怎样才能做到这一点呢？最好的方法是在左边添加填充：10px；再次查看演示。是的，它添加了填充，但与以前不同。如果你再看一遍，你会发现你的小提琴和我的不同。嗨，我又变了。我想这是你需要的。你可以删除填充，如果你想！不，它不起作用。