Question

我试图将div放在一个宽度值里面，div的边框有我想要的宽度，但是我在div中的文字忽略了那个宽度，它似乎继承了容器的宽度。不过，这只是正在做的文本。

我通常不使用li标签，所以我真的不知道问题是什么。

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

<div id="container">
  <div class="inner">
    <ul>
      <li>
        <a class="img" href="..."></a>                                                
        <div class="desc">
           ...  
        </div>
      </li>                           
    </ul>                     
  </div>
</div>

这是CSS：

#container {
    margin:0 auto;
    width: 900px;
    height: 500px;
    box-sizing:border-box;
    position:relative;
    right: 160px;
    -webkit-user-select: none;
    user-select:none;
}

#container div.inner {   
    position:relative;
    overflow:hidden;
    padding:0;
    margin:0;
}
 
#container div.inner ul {    
    white-space:nowrap;
    position:relative;
    left:0; top:0;
    list-style:none;
    font-size:0;
    padding:0;
    margin:0;
    float:left!important;
    width:auto!important;
    height:auto!important;
}

#container ul li {
    display:inline-block;
    margin-top:20px;
    margin-bottom:200px;
    margin-left:-45px; margin-right:-30px;
    -webkit-transform:scale(0.6);
    transform:scale(0.6);
    -webkit-transition:-webkit-transform 0.5s;
    transition:transform 0.5s;
    box-sizing:content-box;
    text-align:center;
    vertical-align:middle;
    padding:0;
    position:relative;
    list-style:none;
    backface-visibility:hidden;
    
}

#container ul li.active {
    -webkit-transform:scale(1); 
    transform:scale(1);
    background-color:transparent;
}
      
      #container ul li.active .desc {
      display: block;
}

      .desc {
    display: none;
    width: 310px!important;
    height: 200px;
    border: 1px solid #fff;
    position: relative;
    right: 350px;
    top: 275px;
    color: #fff;
    font-family: Arial; 
    font-size: 11px;
    padding: 15px;
    text-align: justify;
      }


#container .img {
    width: 200px;
    height: 320px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
    display:block;
    position:absolute;
    font-size:0;
    cursor:inherit;
    transition:all linear 0.4s;
}

Answer 1

这里似乎有很多CSS存在冲突。您确定需要使用＆＃39;！important＆＃39;在很多地方？

很难说出发生了什么，但我的感觉是使用位置：绝对和漂浮正在破坏事物。

此外，li中的div（＆＃34; desc＆＃34;）设置为在某个时刻显示：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;
     ...

如果你能提供一个有效的Jsfiddle或代码片段，那么我们可以看到你想要实现的目标，这将有所帮助。

我也想为你重写一下，这样你就可以看到在没有所有冲突的情况下完成布局的方法可能更简单。

Answer 2

您.desc {}中的

是底部的第二个padding: 15px; 尝试删除那个。

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

2 个答案: