如何让列表项的标记在文字的最右边并且右对齐

ipqtjmqj 2016-03-14 10:30:27
我想模拟聊天软件的界面, 你一句, 我一句, 一个靠左, 一个靠右
...全文
869 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
ipqtjmqj 2016-03-15
  • 打赏
  • 举报
回复
引用 7 楼 zpjshiwo77 的回复:
你要把布局那一章全都看一下, 不要光看浮动。首先你要理解的就是什么是文档流。 浮动你可以理解为一个元素紧挨着一个元素,当某一行已经装不下浮动元素以后,最后一个浮动元素就会换行。例如,有三个浮动元素宽度都是100px,它们的父级元素的宽度是250px,这个时候第三个元素会下移而不是紧挨第二个元素。 有很多方法可以实现你所需要的效果的,不一定要浮动,例如定位也可以。 ps:如果你真的想好好做出来的话,就稍微学一下前端的东西,前端的东西学起来不算难,很快就可以入手的。
嗯. 论坛只是一个引导, 想要真正理解还得自己去理解与实践.
ipqtjmqj 2016-03-14
  • 打赏
  • 举报
回复
引用 1 楼 zpjshiwo77 的回复:
好像不可以,你如果要做成这样的话,建议是重写,这样还好看一点。
什么叫重写
zpjshiwo77 2016-03-14
  • 打赏
  • 举报
回复
好像不可以,你如果要做成这样的话,建议是重写,这样还好看一点。
zpjshiwo77 2016-03-14
  • 打赏
  • 举报
回复
你要把布局那一章全都看一下, 不要光看浮动。首先你要理解的就是什么是文档流。 浮动你可以理解为一个元素紧挨着一个元素,当某一行已经装不下浮动元素以后,最后一个浮动元素就会换行。例如,有三个浮动元素宽度都是100px,它们的父级元素的宽度是250px,这个时候第三个元素会下移而不是紧挨第二个元素。 有很多方法可以实现你所需要的效果的,不一定要浮动,例如定位也可以。 ps:如果你真的想好好做出来的话,就稍微学一下前端的东西,前端的东西学起来不算难,很快就可以入手的。
ipqtjmqj 2016-03-14
  • 打赏
  • 举报
回复
引用 5 楼 zpjshiwo77 的回复:
1.text-align是规定元素内文字的对齐方式,float:right是使元素浮动。 2.text-align有五个值,left靠左,center居中,right靠右,justify两端对齐,inherit继承父元素的值,一般默认的值为left。 3.好好去理解一下float是什么:http://www.w3school.com.cn/css/css_positioning.asp
w3school上的我看过了, 看得一知半解. 所以才来论坛问, 您可以用通俗一点的语言解释一下吗, 或者说一下让一个元素向右靠而不会浮到最上面的关键在哪
zpjshiwo77 2016-03-14
  • 打赏
  • 举报
回复
1.text-align是规定元素内文字的对齐方式,float:right是使元素浮动。 2.text-align有五个值,left靠左,center居中,right靠右,justify两端对齐,inherit继承父元素的值,一般默认的值为left。 3.好好去理解一下float是什么:http://www.w3school.com.cn/css/css_positioning.asp
ipqtjmqj 2016-03-14
  • 打赏
  • 举报
回复
引用 3 楼 zpjshiwo77 的回复:
就是你自己写以个列表项啊,用一个标签代替不就行了么。

<!DOCTYPE html>
<html lang="en">
<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 div,.right div{
        width: 190px;
    }
    .right div{
        text-align: right;
    }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"><span></span><div>11111</div></div>
        <div class='right'><span></span><div>11111</div></div>
         <div class="left"><span></span><div>11111</div></div>
        <div class='right'><span></span><div>11111</div></div> 
        <div class="left"><span></span><div>11111</div></div>
        <div class='right'><span></span><div>11111</div></div>
    </div>
</body>
<script type="text/javascript">
</script>
</html>
谢了. 顺便再问一个问题, 就是用text-align:right与float:right的区别. text-align只能使文字靠右吗. float:right我试过, 如果有多个就会都浮到第1行从而重叠, 要想控制一个元素向右浮而不向上浮, 最关键是什么
zpjshiwo77 2016-03-14
  • 打赏
  • 举报
回复
就是你自己写以个列表项啊,用一个标签代替不就行了么。

<!DOCTYPE html>
<html lang="en">
<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 div,.right div{
        width: 190px;
    }
    .right div{
        text-align: right;
    }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"><span></span><div>11111</div></div>
        <div class='right'><span></span><div>11111</div></div>
         <div class="left"><span></span><div>11111</div></div>
        <div class='right'><span></span><div>11111</div></div> 
        <div class="left"><span></span><div>11111</div></div>
        <div class='right'><span></span><div>11111</div></div>
    </div>
</body>
<script type="text/javascript">
</script>
</html>
互联网产品经理在向技术部门递交产品策划方案时,除了详尽的需求阐述,一份清晰易懂的产品原型设计方案同样不可或缺。一份出色的原型设计,不仅能促进前期的深入讨论,更能让美工和开发人员更直观地理解产品特性,进而优化工作流程,减少不必要的时间消耗,提升整体工作效率。接下来,我想就产品经理与原型设计之间的关系进行简要的探讨,并期待能与大家进行深入的交流和探讨。 产品原型,简而言之,是产品设计最终成形之前的一个基础框架。对于网站而言,它意味着对页面模块和元素进行初步、大致的排版与布局。进一步讲,我们还会加入一些交互性元素,使原型更加具体、生动,更贴近最终产品的形态,从而帮助团队成员更好地理解和构建产品。 很多人存在一个误区,认为UI、UE设计师的职责就是将产品原型转化为具体的页面效果。然而,实际上他们的工作流程是在原型设计完成之后展开的。在整个产品开发流程中,产品经理是最了解产品特性、用户和市场需求的角色。尽管设计师在视觉设计方面可能表现得非常出色,但他们在理解产品、用户、市场及业务方面的深度与准确性上,往往无法与产品经理相提并论。准确地说,设计师的工作是将产品原型转化为产品经理所期望的视觉效果。

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧