同一行设置文字左右对齐,CSS怎么写
现在已经有了左对齐的文字样式,想增加一个右对齐的文字样式不知道CSS应该如何写啊高手们帮忙解答一下哦,最好按照下面的格式分别给我写一下,谢谢原来的CSS样式为.heade...
现在已经有了左对齐的文字样式,想增加一个右对齐的文字样式
不知道CSS应该如何写啊
高手们帮忙解答一下哦,最好按照下面的格式分别给我写一下,谢谢
原来的CSS样式为
.header_top1{ width:960px; background:url(../images/topbg.jpg) repeat-x; height:29px; float:left;}
.header_top1 span,.header_gg span{ background:url(../images/icon1.jpg) left no-repeat; line-height:26px; color:#EAF0F1; padding-left:18px; margin-left:10px; font-size:12px;}
页面中调用的写法为
<div class="header_top1"> <span>欢迎光临某某某网站 </span> </div> 展开
不知道CSS应该如何写啊
高手们帮忙解答一下哦,最好按照下面的格式分别给我写一下,谢谢
原来的CSS样式为
.header_top1{ width:960px; background:url(../images/topbg.jpg) repeat-x; height:29px; float:left;}
.header_top1 span,.header_gg span{ background:url(../images/icon1.jpg) left no-repeat; line-height:26px; color:#EAF0F1; padding-left:18px; margin-left:10px; font-size:12px;}
页面中调用的写法为
<div class="header_top1"> <span>欢迎光临某某某网站 </span> </div> 展开
展开全部
如果header_top1定义的960px是整个内容的宽度,那么可用以下方式解决——
在CSS样式中增加一项:
.header_top_right {width: 30%(注:这个根据需靠右对齐的文字的宽度设,也可以用px单位); float: right; text-align: right;}
在页面中:
<div class="header_top1"> <span>欢迎光临某某某网站 </span>
<div class="header_top_right">登录</div>
</div>
希望有帮助。
在CSS样式中增加一项:
.header_top_right {width: 30%(注:这个根据需靠右对齐的文字的宽度设,也可以用px单位); float: right; text-align: right;}
在页面中:
<div class="header_top1"> <span>欢迎光临某某某网站 </span>
<div class="header_top_right">登录</div>
</div>
希望有帮助。
追问
按照你的方法操作,文字在背景颜色的下面了!
展开全部
.header_top1{ width:960px; background:url(../images/topbg.jpg) repeat-x; height:29px; float:left; text-align:right;}
text-align:right;这个代码的意思是让内容右对齐。
text-align:right;这个代码的意思是让内容右对齐。
追问
那然后页面中怎么写呢?
是一段文字左对齐,一段文字右对齐啊
左侧文字已经有span了
追答
那就用定位吧:
.header_top1{ width:960px; background:url(../images/topbg.jpg) repeat-x; height:29px; float:left;position:relative}
.header_top1 .you{width:100px;height:29px;position:absolute;top:0;right:0;}
欢迎光临某某某网站 我是右边的
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt-->
<html>
<head>
<title>CSS让统一行文字以及输进框对齐</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#a {
height:30px;
border:1px solid #ccc;
}
#b {
margin-top:20px;
height:30px;
border:1px solid #ccc;
}
#a input {
width:200px;
height:30px;
border:1px solid red;
}
#b input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="a"><input />Text1</div>
<div id="b"><input />Text2</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt-->
<html>
<head>
<title>CSS让统一行文字以及输进框对齐</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#a {
height:30px;
border:1px solid #ccc;
}
#b {
margin-top:20px;
height:30px;
border:1px solid #ccc;
}
#a input {
width:200px;
height:30px;
border:1px solid red;
}
#b input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="a"><input />Text1</div>
<div id="b"><input />Text2</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
是没有左右对齐的,如果一定要实现那样的,最好是给对象加个以em为单位的宽度。这样就能够实现左右对齐了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<span style="float:right">欢迎光临某某某网站 </span>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |