1

かみそりを使用する現在のプロジェクトにチャットウィンドウを追加しました。私が抱えている問題は、新しい行が発生すると、すべてが左にシフトすることです...問題のスクリーンショットはキャプチャー、強調表示されたテキストを右に揃える場所を示す赤い線です。この領域を表示する現在のコードは次のようになります。このような：

<div id="messages" class="rectangular-area" style="text-align: left; width: 600px;">
<h3>
    Latest received events:
</h3>
 @For Each item In xList
   If item.Contains("System Message") Then
       @<br />@<b style="color: Red">@item.Split("-")(0)  - <b style="color: Black">@item.Split("-")(1) : <b style="color: #8B6508">@item.Split("-")(3)</b></b> </b>
   ElseIf item.Contains("*******@******online.com") Then
       @<br />@<b style="color:#00CDCD">@item.Split("-")(0) <b style="color: Blue">(@item.Split("-")(1)) <b style="color:Black"> : @item.Split("-")(2)</b></b></b>
   ElseIf item.Contains("************") Then
      @<br />@<b style="color:#00CDCD">@item.Split("-")(0) <b style="color: #E066FF">(@item.Split("-")(1)) <b style="color:Black"> : @item.Split("-")(2)</b></b></b>
   ElseIf item.Contains("************") Then
       @<br />@<b style="color:#00CDCD">@item.Split("-")(0) <b style="color: #66CDAA">(@item.Split("-")(1)) <b style="color:Black"> : @item.Split("-")(2)</b></b></b>
   Else
        @<br />@<b style="color:#00CDCD">@item.Split("-")(0) <b style="color: #FFA54F">(@item.Split("-")(1)) <b style="color:Black"> : @item.Split("-")(2)</b></b></b>
   End If
Next
</div>

この偉業を達成する方法について何かアイデアはありますか？すべてのタイプの3番目でalign-leftを使用しようとしましたが<b style>、機能しません。

4

1 に答える 1

1

インラインスタイルを使用したマークアップは処理が非常に難しいため、プレーンHTMLとCSSの簡単な例を次に示します。

HTML

<ul>
    <li>
        <strong>User 1</strong>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
    </li>
    <li>
        <strong>User 2</strong>
        <p>Duis aute irure dolor in reprehenderit.</p>        
    </li>
    <li>
        <strong>User 1</strong>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
    </li>
</ul>​

CSS

strong, p {
    display: block;
    width: 50%;
    float: left;
    margin-bottom: 1em;
}

デモ

于 2012-12-22T23:54:06.090 に答える