2016-05-02 15 views
0

最初のdiv内のイメージは、上から2番目のdiv内のリストと水平に整列されているはずです。しかし、あなたが見ることができるように、リストはトップとのギャップがあります。このギャップを取り除く方法を親切に指導してください。イメージを上からリストに水平に整列する方法は?

FIDDLE:https://jsfiddle.net/sryzdn/svg0716k/

HTML:

<div id="container"> 
    <div id="div1"><img src="http://placehold.it/200x100"></div> 
    <div id="div2"> 
    <ul> 
     <li>aaa</li> 
     <li>bbb</li> 
     <li>ccc</li> 
    </ul> 
    </div> 
</div> 

CSS:

#container { 
    width: 400px; 
    height: 400px; 
    background-color: red; 
} 

#div1 { 
    width: 200px; 
    height: 200px; 
    background-color: green; 
    float: left; 
    position: relative; 
} 

#div1 img { 
    position: absolute; 
    top: 0; 
} 

#div2 { 
    width: 200px; 
    height: 200px; 
    background-color: blue; 
    float: left; 
    positive: relative; 
} 

#div2 ul { 
    position: absolute; 
    top: 0; 
} 

#div2 li { 
    display: inline-block; 
    border: 1px solid black; 
} 
+1

'ul {margin:0}'? –

答えて

0

絶対このhttps://jsfiddle.net/0guuehj8/

コメントpostitonを参照してパディングを再定義

#div2 ul { 
    /*position: absolute; 
    top: 0;*/ 
    margin:0px; 
    -webkit-padding-start: 0px; 
    padding: 0; 
} 
+0

web.kitブラウザではないasnwerを更新しました – scaisEdge

1

top:0プロパティを削除し、#div2 ulmargin-top: 0pxを追加参照してください。

#div2 ul { 
    position:absolute; 
    margin-top:0px; 
} 
関連する問題