html - 如何修复我的 div 位移对齐?
问题描述
我终于创建了我的聊天框(一周的工作),但现在我的顶部聊天框和底部聊天框已关闭?为什么是这样?我认为它与边距功能或填充有关!
body {
background-color: #6B6B6B;
background: url(http://wizzfree.com/pix/bg.jpg) fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
margin: 50px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
top: 100px;
left: 50%;
width: 400px;
margin-left: -250px;
/* half width */
border-radius: 0px 0px 30px 30px;
background-color: rgba(0, 0, 0, .4);
}
/*... input message ...*/
input[type=text] {
width: 230px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color: transparent;
}
/*... bubble containers ...*/
.bubble {
position: absolute;
max-width: 200px;
padding: 10px;
border-radius: 0px 20px 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.bubble-r {
position: absolute;
max-width: 200px;
padding: 10px;
border-radius: 20px 0 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.bubble>img {
position: absolute;
right: 100%;
top: 0;
}
.bubble-r>img {
position: absolute;
left: 100%;
top: 0;
transform: scaleX(-1);
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.2;
letter-spacing: .5px;
}
.right {
right: 50px;
}
/*......... crossfade on buttons .........*/
.hover img {
transition: .3s;
position: absolute;
}
.nohover {
opacity: 0;
}
a:hover .hover {
opacity: 0;
}
a:hover .nohover {
opacity: 1;
}
<div class="chatbox">
<!-- emojis list -->
<div style="background:#2f2f2f;height:42px;display:flex;">
<a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
style="margin-left:-20px;"></a>
<!-- input message -->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!-- send button -->
<b style="margin-left:0px;size:16;line-height:2.9;color:dimgray;"><i>Typing... </i></b>
<a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a>
</div>
<!--............... chatlines .................-->
<div class="chatbox" style="height: 200px;padding-top: 15px;padding-left: 50px;overflow: hidden;">
<div class="bubble-r right chattext"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
<div><b>Yummi:</b> Thx your sooo sweet!
</div>
</div>
<div class="bubble chattext" style="margin-top: 45px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
<div><b>You:</b> how are you do you find your cat? you are so lovely today. what u doing?
</div>
</div>
<div class="bubble-r right chattext" style="margin-top: 120px;"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
<div><b>Yummi:</b> cool. see u tomorrow...
</div>
</div>
<div class="bubble chattext" style="margin-top: 180px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
<div><b>You:</b> I trying calling soon ok... maybe later. I was super busy last night.
</div>
</div>
</div>
<!--...........................................-->
解决方案
所做的更改是:
- 在
chatbox
课堂上,设置margin-left
为-200px
。 - 对于
chatbox
元素(具有内联 CSS),在内联 CSS 中添加margin-left: -225px
, 和top: 42px
。
请注意,元素现在在中心对齐。偏移是因为padding
在元素中(chatbox
一个带有内联 CSS)
body {
background-color: #6B6B6B;
background: url(http://wizzfree.com/pix/bg.jpg) fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
margin: 50px;
}
/*............... chatbox ...............*/
.chatbox {
position: absolute;
top: 100px;
left: 50%;
width: 400px;
margin-left: -200px;
/* half width */
border-radius: 0px 0px 30px 30px;
background-color: rgba(0, 0, 0, .4);
}
/*... input message ...*/
input[type=text] {
width: 230px;
height: 40px;
border: none;
outline: none;
padding-left: 30px;
font-size: 14px;
color: lightgrey;
font-weight: bold;
font-style: italic;
letter-spacing: .5px;
background-color: transparent;
}
/*... bubble containers ...*/
.bubble {
position: absolute;
max-width: 200px;
padding: 10px;
border-radius: 0px 20px 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.bubble-r {
position: absolute;
max-width: 200px;
padding: 10px;
border-radius: 20px 0 20px 20px;
background-color: rgba(0, 0, 0, .3);
}
.bubble>img {
position: absolute;
right: 100%;
top: 0;
}
.bubble-r>img {
position: absolute;
left: 100%;
top: 0;
transform: scaleX(-1);
}
.chattext {
font-family: Arial;
color: grey;
font-size: 12px;
line-height: 1.2;
letter-spacing: .5px;
}
.right {
right: 50px;
}
/*......... crossfade on buttons .........*/
.hover img {
transition: .3s;
position: absolute;
}
.nohover {
opacity: 0;
}
a:hover .hover {
opacity: 0;
}
a:hover .nohover {
opacity: 1;
}
<div class="chatbox">
<!-- emojis list -->
<div style="background:#2f2f2f;height:42px;display:flex;">
<a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
style="margin-left:-20px;"></a>
<!-- input message -->
<form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
<!-- send button -->
<b style="margin-left:0px;size:16;line-height:2.9;color:dimgray;"><i>Typing... </i></b>
<a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a>
</div>
<!--............... chatlines .................-->
<div class="chatbox" style="height: 200px;padding-top: 15px;padding-left: 50px;overflow: hidden; margin-left: -225px; top: 42px;">
<div class="bubble-r right chattext"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
<div><b>Yummi:</b> Thx your sooo sweet!
</div>
</div>
<div class="bubble chattext" style="margin-top: 45px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
<div><b>You:</b> how are you do you find your cat? you are so lovely today. what u doing?
</div>
</div>
<div class="bubble-r right chattext" style="margin-top: 120px;"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
<div><b>Yummi:</b> cool. see u tomorrow...
</div>
</div>
<div class="bubble chattext" style="margin-top: 180px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
<div><b>You:</b> I trying calling soon ok... maybe later. I was super busy last night.
</div>
</div>
</div>
<!--...........................................-->
如果您需要任何解释,请告诉我。
推荐阅读
- javascript - 在 gulp 服务器中刷新 AngularJS 页面后,显示错误无法 GET
- java - 将常规 TCP/IP 通信更改为 SSL
- asp.net-mvc-5 - 图标被动画取代?&?
- javascript - 如何使用 ESlint 解决警告:在返回语句中禁止赋值(无返回赋值)?
- javascript - 如何在 JavaScript 中检查变量值是否为 [""]
- python - 基于正则表达式创建两个数据框
- java - 如何在任务中关闭带有名称的库存
- javascript - 使用 JavaScript 循环中的两个数组
- c# - ShareFile 用户使用 API 邀请到 Podio 工作区
- ubuntu - 如何使用通过 sssh 连接的 ubuntu 在浏览器上打开链接