inline-block的应用:下一页

最新推荐文章于 2021-02-21 11:29:06 发布

原创最新推荐文章于 2021-02-21 11:29:06 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

本文介绍了一个使用inline-block属性实现页面导航栏的实例，通过CSS样式调整，使链接元素在同一行显示，并保持良好的对齐和间距。文章详细展示了HTML结构与CSS代码，适合前端开发者学习和参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

inline-block的应用（下一页）:
//html

<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标记</title>
<link type="text/css" href="p.css" rel="stylesheet">
</head>

<body>
   <div>
       <a href="#">上一页</a>
       <a id="now" href="#">1</a>
       <a href="#">2</a>
       <a href="#">3</a>
       <a href="#">4</a>
       <a href="#">5</a>
       <a href="#">6</a>
       <a href="#">....</a>
       <a href="#">99</a>
       <a href="#">100</a>
       <a href="#">下一页</a>
   </div>
</body>
</html>

//css

*{
  margin:0;
  padding:0;
}
div{
 text-align:center;
 height:58px;
 width:600px;
 background-color:#e8e8e8;
 margin:190px auto;
}

a{
display:inline-block;
 height:28px;
 line-height:28px;
 background-color:#FFFFFF;
 border:1px solid #cdcdcd;
 text-decoration:none;
 color:#333333;
 padding:0px 9px 0 9px;

}
a:hover{
  border:1px #FF0000 solid;
  color:#FF0000;
}
#now{
  font-weight:bold;
  background-color:#FCF9EA;
  cursor:text;
}
#now:hover{
    color:#333333;
	border:1px solid #cdcdcd;
	
}

在这里插入图片描述