Html 使用CSS将位置绝对元素宽度调整为内容大小

我试着把元素放在一个水平的行中，这样我可以滚动浏览它们，为此我制作了一个内部和外部容器。外部容器具有固定的宽度，内部容器的宽度应由其内容物决定，该内容物可以大于外部div

HTML

CSS

我试图单独使用CSS解决这个问题，但到目前为止我一直没有成功。对于此问题，浏览器兼容性不是问题

我所拥有的

我想要什么

---

我不知道我是否理解你的问题，但是你试过了吗

overflow-x: scroll;
overflow-y: hidden;

---

我不知道我是否理解你的问题，但是你试过了吗

overflow-x: scroll;
overflow-y: hidden;

---

只是做一些修改

#inner{width: 750px;}
#outer{width: 250px;overflow-x: auto;}

---

只是做一些修改

#inner{width: 750px;}
#outer{width: 250px;overflow-x: auto;}

使用空白：nowrap；论内部

使用空白：nowrap；论内部

---

HTML无效，因为div不能是ul的子级

事实上，我不确定你是否需要ul，因为你可以在没有ul的情况下实现你的目标

我已经加宽了小提琴的外格，这样你就可以看到发生了什么

外{ 宽度：250px； 位置：相对位置； 溢出：隐藏； 背景颜色：浅绿色； 高度：80px； 保证金：自动； 文本对齐：居中； } 内在的{ 空白：nowrap； 显示：内联块； 背景：红色； } .项目：第一个孩子{ 左边距：0； } .项目{ 宽度：100px； 高度：80px； 背景颜色：浅蓝色； 左边距：10px； 显示：内联块； }

---

HTML无效，因为div不能是ul的子级

事实上，我不确定你是否需要ul，因为你可以在没有ul的情况下实现你的目标

我已经加宽了小提琴的外格，这样你就可以看到发生了什么

外{ 宽度：250px； 位置：相对位置； 溢出：隐藏； 背景颜色：浅绿色； 高度：80px； 保证金：自动； 文本对齐：居中； } 内在的{ 空白：nowrap； 显示：内联块； 背景：红色； } .项目：第一个孩子{ 左边距：0； } .项目{ 宽度：100px； 高度：80px； 背景颜色：浅蓝色； 左边距：10px； 显示：内联块； }

---

你不清楚我想要什么/我拥有什么。当你打开小提琴时，我看到第二张图的结果，我解释为，你想要什么。啊，是的，很抱歉。我编辑了我的问题来解决这个问题。你不能在ul中放置div…这是无效的HTML。你的“我想要什么/我拥有什么”不清楚。当你打开小提琴时，我看到第二张图的结果，我解释为，你想要什么。啊，是的，很抱歉。我编辑了我的问题来解决这个问题。你不能把div放在ul中…这是无效的HTML。div溢出不是问题，我知道怎么做。我想把项目保留在一行，而不是让它们分成几行。我对它进行了注释以演示问题，行在那里，虽然div溢出不是问题，但我知道如何做这部分。我想将项目保留在一行上，而不是让它们分成几行。我对其进行了注释，以演示问题，行在那里。哦，对了，我在创建小提琴时提出了这个问题，它们实际上是我项目中的元素。哦，对了，我在创建小提琴时提出了这个问题，它们实际上是我项目中的元素。我知道它必须很简单，多谢@溃烂没问题。看看Paulie_D的评论吧。他是正确的，因为你的代码是错误的HTML。将div嵌套在UL中不会通过验证器。是的，这是我的错误，我的项目中的子元素是元素。我在创建JSFIDLE时搞砸了。我知道它必须简单一些，非常感谢@溃烂没问题。看看Paulie_D的评论吧。他是正确的，因为你的代码是错误的HTML。将div嵌套在UL中不会通过验证器。是的，这是我的错误，我的项目中的子元素是元素。我在创建JSFIDLE时搞砸了。