Css style tutorial: text-and-image mixing [under the text on the image]

Css style tutorial: text-and-text layout [under the text on the figure]. The title is messy because it doesn't know how to write it, next, let's take a look at the mixed text and mixed text effects and you will know how it works.

View the css layout code.

The code is as follows:	Copy code
<Ul class = "hotGroup"> <Li> <a href = "#"> </a> <span> Circle name </span> </li> <Li> <a href = "#"> </a> <span> Circle name </span> </li> <Li> <a href = "#"> </a> <span> Circle name </span> </li> <Li> <a href = "#"> </a> <span> Circle name </span> </li> <Li> <a href = "#"> </a> <span> Circle name </span> </li> <Li> <a href = "#"> </a> <span> Circle name </span> </li> </Ul>

Isn't the style code very concise? Let's take a look at how the css style is controlled.

 

The code is as follows:

Copy code

Ul. hotGroup, ul. livelyGroup { Padding-top: 12px; } Ul. hotGroup li, ul. livelyGroup li { Float: left; Width: 65px; Text-align: center; } Ul. hotGroup li a, ul. livelyGroup li { Display: block; Height: 50px; Width: 50px; Background-color: # CCCCCC; Margin-right: auto; Margin-left: auto; White-space: nowrap; Overflow: hidden; } Ul. hotGroup li img, ul. livelyGroup li img { Height: 50px; Width: 50px; } Ul. hotGroup li span, ul. livelyGroup li span { Line-height: 22px; Display: block; Height: 22px; Width: 50px; Margin-right: auto; Margin-left: auto; White-space: nowrap; Overflow: hidden; }

The last part is over. Please specify www.111cn.net for original site reprinting.