<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a>Apples</a></li>
<li><a>Bananas</a></li>
<li><a>Lemons</a></li>
<li><a>Oranges</a></li>
</ul>
</body>
</html>
相关推荐
NULL 博文链接：https://qiyan86-163-com.iteye.com/blog/551754
在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性，它可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在同一行内，允许空格。本文向大家描述一下CSS属性...
本文和大家重点讨论一下CSS display:inline和float:left两者的区别，CSS display是指显示状态，inline表示内联，特点是紧贴着前一个内联元素，通常默认的内联元素有span,a,em,strong等。而float表示的是浮动，float:...
<div> DIV1 </div> <div> DIV2 ...和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了 <span
建立一个宽度很长的一个页面，里面包含许多列，外面的div块的宽度不能确定，若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行，下面与大家分享下display:inline-block的使用示例
NULL 博文链接：https://hc24.iteye.com/blog/832493
在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性,大都会对这一属性感觉很迷惑和模糊,本文将详细介绍，需要了解的朋友可以参考下
display:inline-block感觉与display:table-cell有些相似，例如对内部元素的包裹性。但是，由于display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与...
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
在IE6和IE7中这个版本的IE流量器中，对display:inline-block属性支持不佳，这也是一个经典的BUG。 有两种方式解决这个问题，让IE6/IE7 支持 display:inline-block 的方法。 复制代码代码如下:<ul> <li></li> <li></...
在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block 将对象呈递为内联对象，但是...
.button{display:inline;float:right;font-size:12px;cursor:pointer} </style> <body><div id="rbbox">()">关闭</a><iframe src="1.jpg" height="200" width="300" scrolling="no" ></iframe></div> </body> ...
display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有：Opera、Safari。 但很遗憾，最...
NULL 博文链接：https://qiyan86-163-com.iteye.com/blog/554746
NULL 博文链接：https://tianqiushi.iteye.com/blog/2101378
还有一种方法就是设置li为display:inline;这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊，在ie6，7中 inline元素是无法设置上下...
在display属性的值中，inline-block具有一些特殊的混合行为.正如他的名字所暗示的，它具有块级元素的特点，也有行内元素的行为.从块级元素角度来说，可以为他设定外边距和内边距，也可以通过它简便