チャットに取り組んでいますが、CSS に問題があります。むしろ写真で紹介します。
これはどのように見えるかです: http://i.stack.imgur.com/7v7vV.png
これが私が望む方法です:http://i.stack.imgur.com/7v7vV.png
どうすればいいのですか?ありがとう。
チャットに取り組んでいますが、CSS に問題があります。むしろ写真で紹介します。
これはどのように見えるかです: http://i.stack.imgur.com/7v7vV.png
これが私が望む方法です:http://i.stack.imgur.com/7v7vV.png
どうすればいいのですか?ありがとう。
たとえば、次の css を使用します。
p {
text-indent: -50px; //put your first line 50px to the left
margin-left: 50px; //put the rest 50px to the right
}
私はマークアップを推測しましたが、このようなものはどうですか - http://jsfiddle.net/YnPU2/ ?
html:
<p>
<span class="time">20:20:20</span>
<span class="author">quwquu</span>
<span class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
</p>
<p>
<span class="time">20:20:22</span>
<span class="author">dfghdg</span>
<span class="text">when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
</p>
CSS:
p { overflow: hidden; vertical-align: top; }
p span { display: table-cell; }
p .time { width: 62px; }
p .author { width: auto; padding-right: 9px; }
p .text { width: auto; }