61,115
社区成员
发帖
与我相关
我的任务
分享想做出li里的两段文字 一段靠右一段向左 做出来有问题求大神解答
<div id="dvbody">
<img src="素材/weather.jpg" />
<ul>
<li>
<ol>
<li class="left">乌鲁木齐</li>
<li class="right">雷阵雨 20-31</li>
</ol>
</li>
<li>
<ol>
<li class="left">吐鲁番</li>
<li class="right">多云转晴 20-28</li>
</ol>
</li>
<li>
<ol>
<li class="left">喀什</li>
<li class="right">阴雨转多云 25-32</li>
</ol>
</li>
<li>
<ol>
<li class="left">库尔勒</li>
<li class="right">阴雨转阴 21-28</li>
</ol>
</li>
<li>
<ol>
<li class="left">克拉玛依</li>
<li class="right">雷阵雨 26-30</li>
</ol>
</li>
</ul>
想做出下图这种效果
却成了这个样子
提交显示不让出现温度符号所以去掉了
<img src="素材/weather.jpg" />
<ul>
<li>
<ol>
<li class="left">乌鲁木齐</li>
<li class="right">雷阵雨 20-31</li>
</ol>
</li>
<li>
<ol>
<li class="left">吐鲁番</li>
<li class="right">多云转晴 20-28</li>
</ol>
</li>
<li>
<ol>
<li class="left">喀什</li>
<li class="right">阴雨转多云 25-32</li>
</ol>
</li>
<li>
<ol>
<li class="left">库尔勒</li>
<li class="right">阴雨转阴 21-28</li>
</ol>
</li>
<li>
<ol>
<li class="left">克拉玛依</li>
<li class="right">雷阵雨 26-30</li>
</ol>
</li>
</ul>
想做出下图这种效果
却成了这个样子
提交显示不让出现温度符号所以去掉了
...全文
请发表友善的回复…
发表回复
weixin_41160473 2018-01-31
- 打赏
- 举报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clear{clear:both}
li{list-style:none;}
ul{padding:0px;}
#dvbody ul li{line-height:2;width:100%;}
#dvbody ul li ol{padding:0px;}
#dvbody ul li ol li{width:150px;float:left;}
.left{text-align:left}
.right{text-align:right}
</style>
</head>
<body>
<div id="dvbody">
<img src="素材/weather.jpg" />
<ul>
<li>
<ol>
<li class="left">乌鲁木齐</li>
<li class="right">雷阵雨 20-31</li>
<div class="clear"></div>
</ol>
</li>
<li>
<ol>
<li class="left">吐鲁番</li>
<li class="right">多云转晴 20-28</li>
<div class="clear"></div>
</ol>
</li>
<li>
<ol>
<li class="left">喀什</li>
<li class="right">阴雨转多云 25-32</li>
<div class="clear"></div>
</ol>
</li>
<li>
<ol>
<li class="left">库尔勒</li>
<li class="right">阴雨转阴 21-28</li>
<div class="clear"></div>
</ol>
</li>
<li>
<ol>
<li class="left">克拉玛依</li>
<li class="right">雷阵雨 26-30</li>
<div class="clear"></div>
</ol>
</li>
</ul>
</body>
</html>
这样就可以了
Jasmine_Bsb 2018-01-26
- 打赏
- 举报
一个左浮，一个右浮就行了
孟子E章 2018-01-24
- 打赏
- 举报
这样
<style>
.left {
display:inline;
float:left;
}
.right {
display:inline;
float:right;
}
</style>
</head>
<body> <div id="dvbody">
<img src="素材/weather.jpg" />
<ul>
<li>
<ol>
<li class="right">雷阵雨 20-31</li>
<li class="left">乌鲁木齐</li>
</ol>
</li>
<li>
<ol>
<li class="right">多云转晴 20-28</li>
<li class="left">吐鲁番</li>
</ol>
</li>
</ul>