Heim > Artikel > Web-Frontend > 如何让列表项的标记在文字的最右边并且右对齐_html/css_WEB-ITnose
如何让列表项的标记在文字的最右边并且右对齐_html/css_WEB-ITnose
- ringa_leeOriginal
- 2018-05-14 14:11:157033Durchsuche
我想模拟聊天软件的界面, 你一句, 我一句, 一个靠左, 一个靠右
回复讨论(解决方案)
好像不可以，你如果要做成这样的话，建议是重写，这样还好看一点。
好像不可以，你如果要做成这样的话，建议是重写，这样还好看一点。
什么叫重写
就是你自己写以个列表项啊，用一个标签代替不就行了么。
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/topic.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css"> .content{
height: 300px;
width: 200px;
}
span{
display: inline-block;
height: 10px;
width: 10px;
background-color: #000;
border-radius: 10px;
} .left span,.left p{
float: left;
} .right span,.right p{
float: right;
} .left p,.right p{
width: 190px;
} .right p{
text-align: right;
}
</style></head><body>
<p>
<p><span></span><p>11111</p></p>
<p><span></span><p>11111</p></p>
<p><span></span><p>11111</p></p>
<p><span></span><p>11111</p></p>
<p><span></span><p>11111</p></p>
<p><span></span><p>11111</p></p>
</p></body><script type="text/javascript"></script></html>谢了.
顺便再问一个问题, 就是用text-align:right与float:right的区别.
text-align只能使文字靠右吗.
float:right我试过, 如果有多个就会都浮到第1行从而重叠, 要想控制一个元素向右浮而不向上浮, 最关键是什么
1.text-align是规定元素内文字的对齐方式，float：right是使元素浮动。
2.text-align有五个值，left靠左，center居中，right靠右，justify两端对齐，inherit继承父元素的值，一般默认的值为left。
3.好好去理解一下float是什么
w3school上的float我看过了, 看得一知半解. 所以才来论坛问, 您可以用通俗一点的语言解释一下吗, 或者说一下让一个元素向右靠而不会浮到最上面的关键在哪
你要把布局那一章全都看一下， 不要光看浮动。首先你要理解的就是什么是文档流。
浮动你可以理解为一个元素紧挨着一个元素，当某一行已经装不下浮动元素以后，最后一个浮动元素就会换行。例如，有三个浮动元素宽度都是100px，它们的父级元素的宽度是250px，这个时候第三个元素会下移而不是紧挨第二个元素。
有很多方法可以实现你所需要的效果的，不一定要浮动，例如定位也可以。
ps:如果你真的想好好做出来的话，就稍微学一下前端的东西，前端的东西学起来不算难，很快就可以入手的。