ul li形狀和文字

我有一些問題與我的形狀列表 - 也許我錯誤地接近它？我需要一些關於我希望達到的指標。ul li形狀和文字

CSS：

#circle { 
    height: 120px; 
    width: 120px; 
    border-radius: 60px; 
    background: #3B5163; 
    -moz-border-radius: 60px; 
    -webkit-border-radius: 60px; 
} 

#tablet{ 
    width: 295px; 
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
}

HTML：

<div style="width: 1000px; margin: 0 auto; padding: 0 0 0 0;"> 



<ul> 

<li style="display:inline;"><div id="circle" style="float:left;"></div></li> 

<li style="display:inline;"><div id="circle" style="float:left;margin: 0 25px 0 25px;""></div></li> 

<li style="display:inline;"><div id="tablet" style="float:left; margin: -100px 25px 0 25px;"></div></li> 

<li style="display:inline;"><div id="circle" style="float:left;margin: 0 25px 0 25px;""></div></li> 

<li style="display:inline;"><div id="circle" style="float:left;"></div></li> 

</ul> 



</div>

正如你可以從我的代碼中看到的和正確撥弄它行。我想放置一個圖標（這是一個跨度）坐在每個形狀的中間，也是每個下面的一個字。但是 - 當我添加這樣的元素時，它會完全拋出。也許我錯誤地接觸了佈局？

來源

2014-03-26 user3435159

哎嗨，我猜你正在尋找這樣的： - http://jsfiddle.net/29NF3/2/

add this css

#circle { 
    height: 120px; 
    width: 120px; 
    border-radius: 60px; 
    background: #3B5163; 
    -moz-border-radius: 60px; 
    -webkit-border-radius: 60px; 
} 
#circle span { 
    clear: both; 
    display: block; 
    text-align: center; 
    vertical-align: middle; 
} 
#tablet{ 
    width: 295px; 
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 
.text { 

    display: block; 
    text-align: center; 

}

更新DEMO： - http://jsfiddle.net/29NF3/5/

來源

2014-03-26 12:01:24

這幾乎是在那裏我只需要在那裏說燈泡在那個圈子下面？ – user3435159

oh ks所以你需要藍色圓圈下方的燈泡文字右邊？ –

@ user3435159嘿，現在檢查答案我想你看起來像這樣...... –

只要我不知道你想放的圖像的大小，是。這是所有我可以說：您應的CSS改成這樣：

#circle { 
    height: auto; 
    width: auto; 
    border-radius: 50%; 
    background: #3B5163; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
} 

#tablet{ 
    width: auto; 
    height: auto; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
}

而且，最好是使用顯示：塊，然後浮動：左。糾正我，如果我錯了，這種方式CSS看到對象爲塊，並與'浮動：'你可以告訴這些箱子左或右堆疊。（如果你沒有定義浮動，默認情況下它們會疊在一起）除此之外，你還可以嘗試一種絕對定位方法。

來源

2014-03-26 12:00:15 YVbakker

ul li形狀和文字

回答

相關問題