تنظيم القوائم في HTML / CSS
-
05-09-2019 - |
سؤال
لدي قائمة وأحتاج إلى قسمين في كل عنصر. أحتاج أيضا إلى القسم الأول ليكون عرضا ثابتا. كيف يجب أن رمز ذلك؟
لقد حاولت استخدام قوائم التعريف:
<dl>
<dt style="width: 2em;">foo</dt><dd>bar</dd>
...
</dl>
... وقوائم المستخدمين مع span:
<ul>
<li><span style="width: 2em;">foo<span>bar</li>
...
</ul>
لا عملت. هل هناك أي طرق قانونية للقيام بذلك؟
المحلول
الطريقة التي توصلت إليها، ربما، لا، ليس كونيا (ولكن فقط لأنني لست مقتنعا بأن هناك وسائل "كونسي" لتنفيذها)، لكنها تعمل:
<style type="text/css" media="screen">
#container
{width: 50%;
margin: 0 auto;
}
ol,
ul {border: 1px solid #ccc;
width: 90%;
padding: 1.4em 0;
}
ol li,
ul li {background-color: #ccc;
margin-left: 20%;
}
ol li span.list-head,
ul li span.list-head
{background-color: #ffa;
float: left;
display: block;
width: 6em;
}
dl {border: 1px solid #ccc;
line-height: 1.4em;
padding: 1.4em 0 0 0;
}
dl dt {background-color: #ffa;
display: block;
margin: 0;
width: 10%;
}
dl dd {background-color: #fc0;
display: block;
margin: 0;
width: 88%;
margin-left: 11%;
position: relative;
top: -1.4em;
}
</style>
...
<div id="container">
<ol>
<li><span class="list-head">Foo:</span> bar.</li>
<li><span class="list-head">Bar:</span> baz.</li>
<li><span class="list-head">Baz:</span> foo.</li>
</ol>
<ul>
<li><span class="list-head">Foo:</span> bar.</li>
<li><span class="list-head">Bar:</span> baz.</li>
<li><span class="list-head">Baz:</span> foo.</li>
</ul>
<dl>
<dt>Foo:</dt>
<dd>bar.</dd>
<dt>Bar:</dt>
<dd>baz.</dd>
<dt>Baz:</dt>
<dd>foo.</dd>
</dl>
</div>
هناك عرض تجريبي في: http://www.davidrhysthomas.co.uk/so/lists.html..
نصائح أخرى
مثل آلان قال لكن إذا كنت قد وضعت دفقة فقط لن تعمل بالطريقة التي تريدها، فجرب هذا:
<ul>
<li><div style="width: 200px; display: inline-block;">foo</div>bar</li>
<li><div style="width: 200px; display: inline-block;">foo12</div>bar</li>
<li><div style="width: 200px; display: inline-block;">foo12345</div>bar</li>
<li><div style="width: 200px; display: inline-block;">foo12345678</div>bar</li>
</ul>
(ربما كنت ترغب في استخدام فئة بدلا من تكرار سمة النمط كل قائمة قائمة)
العرض لا ينطبق على <span>
العلامات كما هي مضمنة. حاول استبدال العلامة ب <div>
أو <p>
أو أي عنصر كتلة أخرى.
استخدم DL وتطفو DT إلى اليسار.
<style type="text/css">
dt {clear:left; float:left; width: 8em;}
</style>
<dl>
<dt>foo<dt>
<dd>bar</dd>
<dt>foo1<dt>
<dd>bar1</dd>
<dt>foo12345<dt>
<dd>bar</dd>
</dl>
جرب إما ملصيا للجزء الأول أو
أود أن أسأل: هل هذا لتمثيل البيانات الجدولة؟ لقد تم تلقيننا في التفكير في أن طاولات HTML شريرة، ولكن للعرض، حسنا، طاولة البيانات، إنها مثالية. لقد رأيت أكثر من مبرم واحد محاولة وتكرار وظيفة <table>
علامة باستخدام <div>
S و CSS.
بالطبع، إذا لم يكن الأمر كذلك، يرجى الاستمرار في ذلك. :-)