div内のdivの幅を正しく設定する方法

Question

div内に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の多くがあるようですここでそれは矛盾している。あなたは非常に多くの場所で '重要！'を使用する必要がありますか？

何が起きているのかは分かりませんが、私の気持ちはポジションを使用しているということです。

また、li（ "desc"）内のdivはある時点でdisplay：blockに設定されています。 必要なものに応じて、インラインまたはインラインブロックに変更してみてください。あなたはそれが表示されたときの幅を設定しようとしている。この後に続いて

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

：ブロック、優先して使用するので：なし...

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

この

はおそらくディスプレイが原因であれば表示されませんあなたのセレクターにもっと特化しています。 .descセクションのために同じことをやってみてください。

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

私たちは、あなたがそれが役立つだろう達成しようとしているかを見ることができますので、あなたが働いてJsfiddleやコードスニペットを供給することができます。

これを書き直して、すべての競合が発生していないレイアウトを実現する方法がもっと簡単になるようにしたいと思います。

Answer 2

あなたの.desc {}は、下から2番目ですpadding: 15px; これを削除してみてください。