Html 如何在li内正确设置div的宽度

我试图给一个li中的div一个width值，div的边框有我想要的宽度，但该div中的文本忽略了该宽度，它似乎继承了容器宽度。不过，这只是文字在起作用

我通常不使用li标签，所以我真的不知道问题出在哪里

这基本上就是我正在使用的HTML：

...  

这是CSS：

#容器{
保证金：0自动；
宽度：900px；
高度：500px；
框大小：边框框；
位置：相对位置；
右：160px；
-webkit用户选择：无；
用户选择：无；
}
#容器分区内部{
位置：相对位置；
溢出：隐藏；
填充：0；
保证金：0；
}
#容器分区内部ul{
空白：nowrap；
位置：相对位置；
左：0；上：0；
列表样式：无；
字号：0；
填充：0；
保证金：0；
浮动：左！重要；
宽度：自动！重要；
高度：自动！重要；
}
#集装箱保险箱{
显示：内联块；
边缘顶部：20px；
边缘底部：200px；
左边距：-45px；右边距：-30px；
-webkit变换：比例（0.6）；
变换：比例（0.6）；
-webkit转换：-webkit转换0.5s；
转变：转变0.5s；
框大小：内容框；
文本对齐：居中；
垂直对齐：中间对齐；
填充：0；
位置：相对位置；
列表样式：无；
背面可见性：隐藏；
}
#集装箱ulli.active{
-webkit转换：规模（1）；
变换：比例（1）；
背景色：透明；
}
#集装箱ul li.active.desc{
显示：块；
}
.描述{
显示：无；
宽度：310px！重要；
高度：200px；
边框：1px实心#fff；
位置：相对位置；
右：350px；
顶部：275px；
颜色：#fff；
字体系列：Arial；
字体大小：11px；
填充：15px；
文本对齐：对齐；
}
#集装箱{
宽度：200px；
高度：320px；
背景尺寸：包含；
背景重复：无重复；
背景位置：中心；
显示：块；
位置：绝对位置；
字号：0；
游标：继承；
过渡：全线性0.4s；
}

这里似乎有很多相互冲突的CSS。你确定你需要使用“！在这么多地方都很重要

很难说到底发生了什么，但我的感觉是，使用position:absolute和float会破坏一切

此外，li中的div（“desc”）在某个点设置为display:block。 根据您需要的外观，尝试将其更改为内联或内联块

#container ul li.active .desc {
      display: block;
}

然后在此之后，您尝试设置显示时的宽度：无

.desc {
     display: none;
     width: 310px!important;
     ...

这可能不会显示，因为如果display:block优先，因为您对选择器的使用更加具体。尝试对.desc部分执行相同的操作：

#container ul li .desc {
     display: none;
     width: 310px!important;
     ...

如果您可以提供一个工作的JSFIDLE或代码片段，那么我们就可以看到您试图实现的目标，这将有所帮助

---

我还想为您重写这篇文章，这样您就可以看到可能有一种更简单的方法来完成布局而不产生所有冲突。

在

中。desc{}

是从底部开始的第二个

填充：15px
尝试删除该代码。
您已经编写的CSS代码是什么？因此，我们可以提供帮助。在您的问题中添加一个JSFIDLE或代码片段。您可以编辑FIDLE以演示问题吗？