Question

html浮动属性float实例怎么用

下面代码样式怎么写可以实现下图漂浮的功能？

<table width="980" height="40" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image:url(images/bg-nav.jpg)"> <tr> <td><div> <ul> <li><a href ="index.aspx">网站首页</a></li> <li><a href ="about.aspx">关于我们</a></li> <li><a href ="NewsList.aspx">新闻中心</a></li> <li><a href ="AllProducts.aspx">产品展示</a></li> <li><a href ="Resume.aspx">招贤纳士</a></li> <li><a href ="Feedback.aspx">在线留言</a></li> </ul></div></td> </tr></table>

Answer 1

你好，你的代码有点混乱哈。你的DIV样式我也不清楚，所以按照这个是实现不了的。首先，float是浮动，一般有左边和右边。

这个导航的实现可以使用DIV+CSS（不用表格）实现。具体我写一个简单的代码给你参考一下：

<style type="text/css">
.now{
background:#3399ff;
width:1000px;
height:60px;
}
.now a{
float:left;
display:block;
width:250px;
height:60px;
line-height:60px;
color:#fff;
}
</style>
<div class="now">
<a href="">第一个</a><a href="">第二个</a><a href="">第三个</a><a href="">第四个</a>
</div>

Answer 2

你可以设置display：inline 把这些元素在一行显示，这就是导航啊

Answer 3

Vue实践-CSS样式position/display/float属性对比使用