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形状和文字

回答

相关问题