需要修复我的div元素以对齐阵容吗？

问题描述

我正在使用一个聊天框，并尝试将我的所有元素排列在一个div中（下面的代码），但是它只是断开并显示在其下方。为什么会这样以及如何解决？

任何建议或示例都将受到欢迎。

body {
    background-color: #6B6B6B;
    margin: 50px;   
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
}   
    .chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: .5px;
}
    .right {
    right:15px;
}
    /*............... chatBox ...............*/
    .chatBox {
    position: absolute;
    width: 500px;
    border-radius: 0px 0px 30px 30px;
    background-color:rgba(0,.4);
}
    input[type=text] {
    width: 240px;
    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 {
    position: absolute;
    max-width:200px;
    padding: 15px;
    padding-top: 0px;
    border-radius: 0px 30px 30px 30px;
    background-color:rgba(0,.3);
}
    /*......... crossfade on buttons .........*/

    .hover img{
    transition:.3s;
    position:absolute;
}
    .nohover{
    opacity:0;}
    a:hover .hover{
    opacity:0;
}
    a:hover .nohover{
    opacity:1;
}

<!--............ chatBox ..............-->

<div class="chatBox">

<!--........ emojis list ........-->

<div style="background:#2f2f2f;height:42px;"><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:40px;size:16;line-height:2.9;"><i>Yummi is Typing...&nbsp;&nbsp;</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 style="height:200px"></div>

解决方法

只需在第二个request中添加一个display: flex，如下所示：

div

,

您可以使用溢出和浮点实现此目的。试试这个：

调整输入的宽度，所有内容彼此相邻：）

body {
    background-color: #6B6B6B;
    margin: 50px;   
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
}   
    .chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: .5px;
}
    .right {
    right:15px;
}
    /*............... chatbox ...............*/
    .chatbox {
    position: absolute;
    width: 500px;
    border-radius: 0px 0px 30px 30px;
    background-color:rgba(0,.4);
    overflow: hidden;
}
    input[type=text] {
    width: 240px;
    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;
    float: left;
}
    .bubble {
    position: absolute;
    max-width:200px;
    padding: 15px;
    padding-top: 0px;
    border-radius: 0px 30px 30px 30px;
    background-color:rgba(0,.3);
}
    /*......... crossfade on buttons .........*/

    .hover img{
    transition:.3s;
    position:absolute;
}
    .nohover{
    opacity:0;}
    a:hover .hover{
    opacity:0;
}
    a:hover .nohover{
    opacity:1;
}

<!--............ chatbox ..............-->

<div class="chatbox">

<!--........ emojis list ........-->

<div style="background:#2f2f2f;height:42px;"><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:40px;size:16;line-height:2.9;"><i>Yummi is Typing...&nbsp;&nbsp;</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 style="height:200px"></div>

,

我通常使用flexbox创建所需的行为，在这种情况下，我将包含输入和发送按钮的div放入了flexbox行中。您可能需要调整以下字段的宽度，导致透明按钮文本现在略微超出黑色区域。我在更改代码的地方注释了代码。

body {
    background-color: #6B6B6B;
    margin: 50px;   
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
}   
    .chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: .5px;
}
    .right {
    right:15px;
}
    /*............... chatbox ...............*/
    .chatbox {
    position: absolute;
    width: 500px;
    border-radius: 0px 0px 30px 30px;
    background-color:rgba(0,.4);
}
    input[type=text] {
    width: 240px;
    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 {
    position: absolute;
    max-width:200px;
    padding: 15px;
    padding-top: 0px;
    border-radius: 0px 30px 30px 30px;
    background-color:rgba(0,.3);
}
    /*......... crossfade on buttons .........*/

    .hover img{
    transition:.3s;
    position:absolute;
}
    .nohover{
    opacity:0;}
    a:hover .hover{
    opacity:0;
}
    a:hover .nohover{
    opacity:1;
}
/*this is the CSS for the div*/
.chatline {
  display: flex;
  flex-flow: row nowrap;/*row-behaviour without breaking*/
}

<!--............ chatbox ..............-->

<div class="chatbox">

<!--........ emojis list ........-->
<!--Added a class to this div below!-->
<div class="chatline" style="background:#2f2f2f;height:42px;"><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:40px;size:16;line-height:2.9;"><i>Yummi is Typing...&nbsp;&nbsp;</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 style="height:200px"></div>