css聊天样式,css实现聊天对话框

css 样式写对话

// 对话样式

.dialogue {

padding-left: 10px;

font-size: 12px;

border: 1px solid red;

//第一步

display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;

}

.leftDetailsImg2{

width: 20px;

height: 20px;

vertical-align: middle;

}

// 置业顾问(自己)对话容器

.counselor{

//第二步

display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;

}

// 客户(他人)对话容器

.client{

//第三步

display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;

}

.leftDetailsImg2{

width: 20px;

height: 20px;

vertical-align: middle;

}

效果图

相关问答

Q1: css样式怎么写

css样式是HTML的一个补充，简单的css使用样式如下:

html

body

div id=div/div

/body

style type="text/css"

width:300px;//设置div的宽度300像素

height:500px;//设置div高度500像素

background-color:red;//设置div的背景颜色为红色

/style

/html

css代码位于style之间，详细的css代码解释见代码注释。

Q2: 求解是关于CSS的问题。假如我有三个栏目分别是，下载，小说，聊天，假如我想把下载显示在左边，小说显示

外链式地址回答：

例子：link rel="stylesheet" type="text/css" href="style/reset.css"

摸版：link rel="stylesheet" type="text/css" href="路径/文件名称"

那从例子和摸版的对比而知：连接(href)的地址是style(路径)下的rese.css（文件名称）样式表

栏目回答：

你想横排的话可以使用浮动！或者直接a标签代替

例子（浮动）：

[html代码↓]

ul

li下载/li

li小说/li

li聊天/li

/ul

[css代码↓]

ul li{float:left;}

注释：所有ul标签下的li标签属性样式都为浮动向右

例子（a标签）：

[html代码↓]

div

a href=""下载/a

a href=""小说/a

a href=""聊天/a

/div

[css代码↓]

无，用a标签不加样式出来的话 一定会很挤。所以你肯定会想隔开，那就加以下样式

a{padding:0 20px;}

所有a标签的属性样式为内边距上下为0左右为20个像素!

再不懂的话，那你就再补充！！！！

你放到中间 办法很多

text-align:center; 这个相对于 文本类型 ，如果你的按钮是图片或者是个文字可以用这个

如果是个块级类型那也没有作用

margin:0 auto 0;这个要配合宽度，让外边距自适应