HTML&；CSS-如何在同一行上相邻放置div？

我正在构建一个聊天界面，现在的任务是在消息之间添加一个日期。日期必须居中，消息传统上必须在左侧和右侧

消息工作正常，但日期是个问题

外观：

聊天室分为几个部分。每个部分都有一个日期。每个部分可以有多条消息

组别代码如下：

        <div>
            <div class="discussionMessageDate">{date here}</div>
            <ul className="noDot">
                <li className="noDot + ..logic to figure out if to apple 'right' class"><span class="discussionMessage">{message}</span></li>
            </ul>
        </div>

我做错了什么？

您应该将“文本对齐：居中；”属性添加到“discussionMessageDate”类中，以便将文本居中。默认情况下，div显示的内容向左对齐

另外，我想您还需要指定容器的最大大小，为300px，否则，您的列表将分布在屏幕上，同时，您的日期具有固定大小

您需要清除浮动，否则浮动元素的父元素将失去其高度

像这样：

body{
    max-width: 300px;
}
.discussionMessageDate {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 5px 13px;
    max-width: 300px;
    display: block;
    text-align: center;
}

.clearer{
    clear: both;
}

<div>
    <div class="discussionMessageDate">{date here}</div>
        <ul class="noDot">
            <li class="right"><span class="discussionMessage">{message}</span></li>
            <li class=""><span class="discussionMessage">{message}</span></li>
            <li class="right"><span class="discussionMessage">{message}</span></li>
        </ul>
    </div>
    <div class="clearer"></div>
    <div>
        <div class="discussionMessageDate">{date here}</div>
            <ul class="noDot">
                <li class="noDot + ..logic to figure out if to apple 'right' class"><span class="discussionMessage">{message}</span></li>
            </ul>
        </div>
    </div>

正文{
最大宽度：300px；
}
.讨论信息日期{
背景：rgba（255，255，255，0.8）；
边界半径：10px；
填充：5px13px；
最大宽度：300px；
显示：块；
文本对齐：居中；
}
.更清楚{
明确：两者皆有；
}
{此处日期}

{message}
{message}
{message}

{此处日期}

{message}

您应该将“文本对齐：居中；”属性添加到“discussionMessageDate”类中，以便将文本居中。默认情况下，div显示的内容向左对齐

另外，我想您还需要指定容器的最大大小，为300px，否则，您的列表将分布在屏幕上，同时，您的日期具有固定大小

您需要清除浮动，否则浮动元素的父元素将失去其高度

像这样：

body{
    max-width: 300px;
}
.discussionMessageDate {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 5px 13px;
    max-width: 300px;
    display: block;
    text-align: center;
}

.clearer{
    clear: both;
}

<div>
    <div class="discussionMessageDate">{date here}</div>
        <ul class="noDot">
            <li class="right"><span class="discussionMessage">{message}</span></li>
            <li class=""><span class="discussionMessage">{message}</span></li>
            <li class="right"><span class="discussionMessage">{message}</span></li>
        </ul>
    </div>
    <div class="clearer"></div>
    <div>
        <div class="discussionMessageDate">{date here}</div>
            <ul class="noDot">
                <li class="noDot + ..logic to figure out if to apple 'right' class"><span class="discussionMessage">{message}</span></li>
            </ul>
        </div>
    </div>

正文{
最大宽度：300px；
}
.讨论信息日期{
背景：rgba（255，255，255，0.8）；
边界半径：10px；
填充：5px13px；
最大宽度：300px；
显示：块；
文本对齐：居中；
}
.更清楚{
明确：两者皆有；
}
{此处日期}

{message}
{message}
{message}

{此处日期}

{message}

在包装div中添加了一个clearfix，看起来我认为它应该可以工作

{此处日期}

{message}

.discussionMessageContainer:：after{
内容：''；
明确：两者皆有；
显示：表格；
}

在包装div中添加了一个clearfix，看起来我认为它应该可以工作

{此处日期}

{message}

.discussionMessageContainer:：after{
内容：''；
明确：两者皆有；
显示：表格；
}

您能否更具体地说明您看到的哪些行为是不正确的？日期如何成为“问题”？您是否尝试在

上声明
text align:center
。discussionMessageDate

？错误的行为是日期不在列表中。订单必须是日期->消息->消息->日期->消息->日期->消息。-每个日期必须显示在列表中。但日期列表显示在不同的地方，你能不能更具体一点，看看你看到的哪些行为是不正确的？日期如何成为“问题”？您是否尝试在

上声明
text align:center
。discussionMessageDate

？错误的行为是日期不在列表中。订单必须是日期->消息->消息->日期->消息->日期->消息。-每个日期必须显示在列表中。但日期列表显示在不同的地方，这是答案吗？这应该是在评论中，而不是作为一个答案。好吧，告诉StackOverflow。。。你不能写声誉低于50的评论。所以请不要因为网站就是这样运作的就投反对票…相反，我应该投反对票，因为网站就是这样运作的。您最好编辑您的“答案”，并在不提问的情况下给出适当的代码示例。然后我会撤销我的否决票，如果你的回答是好的，我会放弃，我一点也不认为这是针对个人的。谢谢，我真的很感谢有助于提高我的贡献的反馈。只是一个否决票并不能真正说明你做错了什么，但是一个评论（当你可以加上它：）是这个答案吗？这应该在评论中，而不是作为一个回答。好吧，告诉StackOverflow。。。你不能写声誉低于50的评论。所以请不要因为网站就是这样运作的就投反对票…相反，我应该投反对票，因为网站就是这样运作的。您最好编辑您的“答案”，并在不提问的情况下给出适当的代码示例。然后我会撤销我的否决票，如果你的回答是好的，我会放弃，我一点也不认为这是针对个人的。谢谢，我真的很感谢有助于提高我的贡献的反馈。只是一个否决票并不能真正说明你做错了什么，但是一个评论（当你可以添加它时：））现在秩序很好！如何对齐容器中心的“discussionMessageDate”并保存li项目的对齐？现在订单就可以了！如何对齐容器中心的“discussionMessageDate”并保存li项目的对齐？

<div class="discussionMessageContainer">
  <div class="discussionMessageDate">{date here}</div>
  <ul class="noDot">
    <li class="right"><span class="discussionMessage">{message}</span></li>
  </ul>
</div>

.discussionMessageContainer::after {
  content:'';
  clear:both;
  display:table;
}