HTMLとCSS - DIVを同じ行に並べるにはどうすればいいですか？

Question

私はチャットインターフェイスを構築しています。私の仕事はメッセージ間に日付を追加することです。日付は中央に配置しなければならず、メッセージは伝統的に左右になければなりません。

メッセージは正しく機能していますが、日付は問題です。

チャットはセクションで分かれています。それはどのように見えるか

。各セクションには日付があります。各セクションには複数のメッセージを入れることができます。

セクションのコードは以下の通りです：

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

クラスは、私が間違って何をやっている

.discussionMessage { 
    background: rgba(255, 255, 255, 0.8); 
    border-radius: 10px; 
    padding: 5px 13px; 
    list-style-type: none; 
    max-width: 300px; 
    float: left; 
    clear: both; 
} 

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

.noDot { 
    list-style-type: none; 
    padding: 0; 
    margin: 0 0 5px 0; 
} 

.right { 
    float: right; 
    clear: both; 
} 

ですか？

Answer 1

は、ラッピングのdivにclearfixを追加し、これは、私はそれはあなたがもう少し具体的にのようになり

https://jsfiddle.net/hmtkyz96/

<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; 
} 

Answer 2

あなたは "text-align：center;"を追加します。プロパティを "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>