هوامش CSS: محاذاة قائمة ضد صورة تعويم اليسار
سؤال
فيما يلي أول قطع لي في ترميز تعليق يشبه Reddit في HTML+CSS. لدي بعض الأسئلة حول CSS والهيكل العام:
- كيف أحصل على جسم التعليق ("لقد خلع الملك قبعته ...") للتوافق مع رأس التعليقات ("ناثان ، نشر ...") وذيل التعليق ("الرد الثابت ...")؟ حاولت صنع القاع الهامش لـ .comment-left لفترة أطول قليلاً ولكن هذا لم يحل المشكلة.
- أعلم أنني كنت أشعر بالضيق قليلاً من العلامات. أي منها زائد؟
- هل هناك طريقة أفضل/أكثر إحكاما للحصول على نفس الهيكل؟
شكرا كل شيء ، ناثان
PS لقد استخدمت المعلومات المفيدة هنا لتكديس سهام التصويت الخاصة بي فوق بعضها البعض.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>CSS sandbox: comments</title>
<style type="text/css">
.vote {
width: 15px;
float: left;
clear: left;
}
.vote img {
display: block;
float: none;
clear: both;
width: 15px;
}
.userpic img {
width: 60px;
}
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
}
.comment-left {
float: left;
}
.head {
margin-left:10px;
}
.tail-list li {
display: inline;
}
img {
border: 0;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="comment">
<span class="comment-left">
<span class="vote">
<a href="#"><img alt="^" title="vote up" src="http://www.reddit.com/static/aupgray.gif"></a>
<a href="#"><img alt="v" title="vote down" src="http://www.reddit.com/static/adowngray.gif"></a>
</span>
<span class="userpic">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
</span>
</span>
<span class="comment-main">
<ul class="comment-contents">
<li class="head">
<a href="#">Nathan</a>, posted 2 hours ago
<a href="#" class="comment-collapse">[-]</a>
</li>
<li class="middle">
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.</p>
<p>Chapter 1 - untitled (eecummings)</p>
</li>
<li class="tail">
<ul class="tail-list">
<li><a href="#">reply</a></li>
<li><a href="#">permalink</a></li>
<li><a href="#">offensive?</a></li>
</ul>
</li>
</ul>
</span>
</div>
</body>
</html>
المحلول
قم بتحديث CSS الخاص بك مع حشوة يسارية على ".Comment-Contents li" وإزالة الهامش على ".head"
.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
}
.head {
margin-left:0px;
}
أثناء وجودك في ذلك ، ما عليك سوى استخدام الحشو بدلاً من الهامش لـ ".Comment-Contents li":
.comment-contents li {
list-style-type: none;
padding: 0 0 10px 60px;
}
أوصي بعدم استخدام الحشو والهامش في الفصل ما لم يكن ذلك ضروريًا تمامًا.
نصائح أخرى
ليس لديك وقت للقيام CSS في الوقت الحالي (ربما لاحقًا) ، ولكن يجب أن تكون قادرًا على تحقيق المظهر مع هذه العلامة:
<div class="comment">
<p class="user">
<a href="#">
<img src="http://www.gravatar.com/avatar/550deada0ac679dfc3c9103b674760af?s=128&d=identicon&r=PG" height="60" width="60">
</a>
<a href="#">Nathan</a>, posted 2 hours ago
<a href="#" class="comment-collapse">[-]</a>
</p>
<p>The king took off his hat and looked at it. Instantly an immense
crowd gathered. The news spread like wildfire. From a dozen leading
dailies,reporters and cameramen came rushing to the scene pellmell in
highpowered monoplanes. Hundreds of reserves,responding without
hesitation to a riotcall,displayed with amazing promptness quite
unparalleled inability to control the everincreasing multitude,but
not before any number of unavoidable accidents had informally
occurred.
</p>
<p>Chapter 1 - untitled (eecummings)</p>
<ul class="commentTools">
<li class="voteUp"><a href="#">vote up</a></li>
<li class="voteDown"><a href="#">vote down</a></li>
<li><a href="#">reply</a></li>
<li><a href="#">permalink</a></li>
<li><a href="#">offensive?</a></li>
</ul>
</div>
و CSS
.comment {
position:relative;
padding-left:75px;
}
.comment p {
}
.comment .user img {
float:left;
margin-left:-60px;
}
.comment .commentTools {
padding-left:0;
}
.comment .commentTools li {
display:inline;
}
.comment .commentTools .voteUp, .comment .commentTools .voteDown {
position:absolute;
display: block;
left:0;
}
.comment .commentTools .voteUp {
top:0;
}
.comment .commentTools .voteDown {
top:15px;
}
.comment .commentTools .voteUp a, .comment .commentTools .voteDown a {
display:block;
width: 15px;
height: 15px;
text-indent:-5000em;
}
.comment .commentTools .voteUp a {
background: url(http://www.reddit.com/static/aupgray.gif) no-repeat;
}
.comment .commentTools .voteDown a {
background: url(http://www.reddit.com/static/adowngray.gif) no-repeat;
}
لم أختبر هذا ، لذلك قد يكون هناك بعض الأخطاء. اسمحوا لي أن أعرف إذا كنت قد أوضحت أي من CSS.
ماذا عن ضبط p hargin-left ليتم تعيينه على 30 بكسل؟
لا تنتمي إلى StackOverflow