多张图片怎么同一行显示

来源:12-4 我还要站个大位置 - 内联块状元素

否极泰来的否

2017-09-05 16:41

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>内联块状元素</title>

<style type="text/css">

a{

    display:inline-block;

width:20px;/*在默认情况下宽度不起作用*/

height:20px;/*在默认情况下高度不起作用*/

background:pink;/*设置背景颜色为粉色*/

text-align:center; /*设置文本居中显示*/

}

.pages{border:1px solid yellow;text-align:center;}


img{

    width:50%;

    height:50%;

    display:inline-block;

    

}

.photos{

    text-align:center;

    

   

}

</style>

</head>

<body>

<div class="pages">

<a>1</a>

<a>2</a>

<a>3</a>

<a>4</a>

</div>

<div class="photos">

    <img src="https://img3.doubanio.com/view/photo/photo/public/p648992662.webp">

    <img src="https://img3.doubanio.com/view/photo/photo/public/p648992662.webp">

    <img src="https://img3.doubanio.com/view/photo/photo/public/p648992662.webp">

    

    

</div>

</body>

</html>


写回答 关注

2回答

  • qq_凡人legend_0
    2017-11-26 10:18:42

    <ul>

        <li>图片<li>

        。。。。。

    <ul>

  • 慕用7278523
    2017-09-05 16:50:53

    设置position:absolute;

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225812 学习 · 18234 问题

查看课程

相似问题