帶文本和圖像的水平菜單

這是我的CSS和HTML菜單。我正在努力研究如何使它全部水平。任何幫助將不勝感激。乾杯。帶文本和圖像的水平菜單

ol { 
margin-top: 20px; 

} 

#images { 
margin-left: 10px; 
} 

#images-text { 
background: #f5f8ef; 
border-radius: 10px; 
width: 300px; 
height: 40px; 
font-family: Impact, Charcoal, sans-serif; 
display: inline; 

}

這是HTML

<ol> 
    <li class="newbar"> 
    <div id = "images"> 
    <img src="images/crowd.png" width ="200" height="180"> 
    <img src="images/crowd.png" width ="200" height="180"> 
    <p> 

    <div id = "images-text"> 
    Arctic Monkeys 
    </div> 
    <div id = "images-text"> 
    Arctic Monkeys 
    </div> 
    </div> 
    </li> 
    </ol> 
    </div>

來源

2014-11-21 user3116358

爲什麼'ol'而不是'ul'？ – 2014-11-21 15:56:37

這段HTML代碼不完整或寫得不好。正如@Paulie_D所說，你不需要'ol' – AnfEn 2014-11-21 16:00:01

你也不能重複使用ID，它們在每個頁面上必須是唯一的。 – 2014-11-21 16:01:09

使用<ol>你不需要。如果您有<img>以下或部分文字，則最好使用<figure>和<figcaption>作爲imagetext。

<figure> 
    <figcaption> 
     Image text 
    </figcaption> 
    <img src="images/crowd.png"> 
</figure>

如果你想在<img>下面的圖片文字只是把<figcaption>的<img>下方。

比，在數字在<div>：

<div> 
    <figure> 
     ... 
    </figure> 
    <figure> 
     ... 
    </figure> 
    <figure> 
     ... 
    </figure> 
    ... 
</div>

的CSS爲每<figure>：

div figure { 
    display: inline-block; 
}

CSS選擇用法：http://www.w3schools.com/css/css_selectors.asp

示例：http://jsfiddle.net/qpk9smm8/

來源

2014-11-21 17:17:50 Sun

帶文本和圖像的水平菜單

回答

相關問題