試圖對齊我的圖像和中心列表

我試着對齊我的圖像和我的列表在中心，但它不與margin:0 auto;。試圖對齊我的圖像和中心列表

而且我想讓我的形象在左邊，我的名單在右邊，但相反的情況正在發生。

有人看到我做錯了什麼？

HTML：

<div class="col_12"> 

    <div class="center"> 
     <img src="http://upload.wikimedia.org/wikipedia/pt/2/2f/Beyonc%C3%A9_-_Dangerously_in_Love.jpg" width="430" height="430" /> 
     <ul> 
      <li><strong>Test:</strong> 24 july 2003</li> 
      <li><strong>Test:</strong> 2002 - 2003; 
       <span>Patchwerk Studios</span> 
       <span>(Atlanta, Georgia)</span> 
       <span>SugarHill Studios</span> 
       <span>(Houston, Texas)</span> 
       <span>South Beach Studios</span> 
       <span>(Miami)</span> 
       <span>Baseline Studios</span> 
       <span>SoHo Studios</span> 
       <span>Sony Music Studios</span> 
       <span>COE.BE.3 Studios</span> 
       <span>(Stone Mountain, Georgia)</span></li> 
      <li><strong>Test:</strong> R&B, Soul</li> 
      <li><strong>Test:</strong> Columbia</li> 
      <li><strong>Singles:</strong> Crazy in love, Baby boy, Me, myself and I, Naughty Girl</li> 
     </ul> 
    </div> 
</div>

CSS：

.col_12 
{ 
width:100%; 
height:auto; 
float:left; 
margin:0 auto; 
padding:15px; 
background:#ccc; 
} 


.col_12 .center{ 
    margin:0 auto; 

    text-align:center; 
    background:red; 

} 

.col_12 p 
{ 
    background-color:#f9f9f9; 
    margin-bottom:-10px; 
} 

.col_12 ul{ 
    list-style:none; 
    float:left; 
} 

.col_12 ul li{ 
    text-align:left; 
} 

.col_12 ul li span{ 
    display:block; 
    margin-left:82px; 

}

來源

2014-09-13 UserX

它在小提琴中看起來很好。 – Dan 2014-09-13 19:24:13

['將圖像浮動到'left'和無序列表到'right']（http://jsfiddle.net/hashem/3yqnj7s6/5/）。 – 2014-09-13 19:24:19

感謝Mary Melody，它似乎工作正常！但是，你能解釋我的解決方案是如何工作的嗎我不理解。你也可以給出答案，我可以接受它嗎？再次感謝:) – UserX 2014-09-13 19:48:35

這裏有一個解決方案，使左邊的img和右邊的ul ...請注意，最後兩個CSS條目都有max-width，以防止其中一個項目丟失如果其他物品太大（如果您願意，可以從代碼中刪除）：

.col_12 { 
    background: none repeat scroll 0 0 #ccc; 
    float: left; 
    height: auto; 
    margin: 0 auto; 
    padding: 15px; 
    width: 100%; 
} 
.col_12 .center { 
    background: none repeat scroll 0 0 red; 
    margin: 0 auto; 
    text-align: center; 
} 
.col_12 p { 
    background-color: #f9f9f9; 
    margin-bottom: -10px; 
} 
.col_12 ul { 
    float: left; 
    list-style: none outside none; 
} 
.col_12 ul li { 
    text-align: left; 
} 
.col_12 ul li span { 
    display: block; 
    margin-left: 82px; 
} 
/* 
    Find the img tag(s) after the div(s) whose classes are "center": 
*/ 
.center img { 
    float: left; 
    max-width: 75%; 
} 
/* 
    Find the ul tag(s) after the div(s) whose classes are "center": 
*/ 
.center ul { 
    float: right; 
    max-width: 25%; 
}

來源

2014-09-13 20:48:46 jerdiggity

試圖對齊我的圖像和中心列表

回答

相關問題