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

Question

我正在尝试为 li 内的 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 是冲突的。您确定需要在这么多地方使用“!important”吗？

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

此外，您在 li(“desc”)内的 div 在某些时候设置为 display:block。根据您需要的外观，尝试将其更改为内联或内联 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 或代码片段，以便我们了解您正在尝试实现的目标，那将会有所帮助。

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