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

Question

我正在开发一个聊天框，并试图将我的所有元素排列在一个 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, 0, 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, 0, 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>

Answer 1

只需将display: flex 添加到您的第二个div，如下所示：

<div style="display: flex; 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>

Answer 2

您可以通过溢出和浮动来实现这一点。试试这个：

调整输入的宽度，一切都相邻:)

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, 0, 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, 0, 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>

Answer 3

我通常使用 flexbox 来创建想要的行为，在这种情况下，我将包含输入和发送按钮的 div 设置为 flexbox-row。您可能需要稍微调整下面字段的宽度，因为透明按钮文本现在稍微超出了黑色区域。代码在我改变的地方被注释了。

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, 0, 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, 0, 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>