#left {
text-align: right
width: 50%
padding-right: 10%
float: left
}
#right {
width: 50%
text-align: left
padding-left: 10%
}
#footer {
clear: both
}
扩展资料：
CSS 规则集（rule-set）由选择器和声明块组成：选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。多条 CSS 声明用分号分隔，声明块用花括号括起来。
当我们要实现ul标签在右上角横向排列时，往往会采取给<ul>、<li>添加有浮动的方法，这样会出现<li>内容出现的顺序跟我们写的不一样的情况，例如：我们写的是这样的：
<div id="headerTop">
<header class = "main">
<div class="logo l">
<p>Classic</p>
</div>
<div class="ulList">
<ul class = "r">
<li><a href="#">Home</a></li>
<li><a href="#">Aboout</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
</div>
登录后复制
得到的结果是这样的：
此时我们可以使用flex布局
css
.main{ width: 1340px margin:0 auto} /*margin: auto->使该区域在浏览器中央*/
* {
margin: 0/* 外边距 */
padding: 0/* 内边距
两种方法,一个是右浮的写在前面,定义右浮动另一个是按顺序写,左边的定义左浮动,右边的定义右浮动,但这样外盒的高度要给定一下,要不容易出问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<style type="text/css">
.top{
width:400pxborder:1px solid grayline-height:2em
}
.left{
float:left
display:inline
}
.right{
float:right
display:inline
}
</style>
</HEAD>
<BODY>
右浮动:<div class="top"><span class="right">右边内容写在左边</span><span >左边内容写在右边</span></div>
左右浮动:<div class="top"><span class="left">左边内容写在左边</span><span class="right">右边内容写在右边</span></div>
</BODY>
</HTML>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）