يمتد الطفل بنفس العرض

Question

أحاول إنشاء قائمة أفقية بالعناصر التي يمثلها <span>'س.القائمة نفسها (parent <div>) له عرض ثابت، لكن عدد العناصر يختلف دائمًا.

أود أن أنجب طفلاً <span>بنفس العرض، بغض النظر عن عددها.

ما قمت به حتى الآن:أضاف أ float: left; نمط لكل فترة وتحديد النسبة المئوية لعرضه (النسب المئوية جيدة إلى حد ما، كما يعرف الخادم في وقت إنشاء الصفحة، عدد عناصر القائمة الموجودة ويمكن تقسيم 100٪ على هذا الرقم).يعمل هذا، باستثناء الحالة عندما يكون لدينا قسمة متبقية (مثل 3 عناصر)، في هذه الحالة لدي فتحة بمقدار بكسل واحد على يمين العنصر الرئيسي <div>, ، وإذا قمت بتقريب النسب المئوية لأعلى، فسيتم تغليف عنصر القائمة الأخير.أنا أيضًا لا أحب إنشاء الأسلوب بسرعة، ولكن إذا لم يكن هناك حل آخر، فلا بأس.

ماذا يمكنني أن أحاول؟

يبدو أن هذه مشكلة شائعة جدًا، إلا أن البحث على Google عن "العناصر الفرعية بنفس العرض" لم يساعد.

Answer 1

يمكنك تجربة جدول ذو تخطيط جدول ثابت.يجب أن يحسب عرض الأعمدة دون الاهتمام بمحتويات الخلية.

table.ClassName {
    table-layout: fixed
}

Answer 2

إذا كان لديك حاوية ذات عرض ثابت، فإنك تفقد بعضًا من فعالية النسبة المئوية للعرض الفرعي.

بالنسبة لحالتك البالغة 33%، يمكنك إضافة فئة إلى النطاق الفرعي الأول وكل رابع لتعيين العرض الصحيح حسب الضرورة.

<div>
<span class="first-in-row">/<span><span></span><span></span><span class="first-in-row"><span></span><span></span>...
</div>

أين

.first-in-row { width:auto; /* or */ width:XXX px; }

Answer 3

هل جربت القيم العشرية، مثل ضبط العرض على 33.33%؟

كما هو محدد في بناء جملة CSS، فإن خاصية العرض (http://www.w3.org/TR/CSS21/visudet.html#the-width-property) يمكن إعطاؤها كـ <percentage> (http://www.w3.org/TR/CSS21/syndata.html#value-def-percentage) ، والذي يُشار إليه على أنه <رقم>.

كما قيل في تعريف الرقم (http://www.w3.org/TR/CSS21/syndata.html#value-def-number)، هناك بعض أنواع القيم التي يجب أن تكون أعدادًا صحيحة، ويُشار إليها باسم <integer>، والبعض الآخر عبارة عن أرقام حقيقية، ويُشار إليها باسم <number>.يتم تعريف النسبة المئوية كـ <number>، وليس كـ <integer> لذا قد تنجح.

سيعتمد الأمر على قدرة المتصفح على حل هذا الموقف إذا لم يتمكن من تقسيم المربع الأصلي على 3 دون بقاء، فهل سيرسم مسافة 1 أو 2 بكسل، أو يجعل مسافة واحدة أو اثنتين من أصل ثلاثة أوسع من الباقي .

Answer 4

بالإشارة إلى إجابة زيان، هناك أيضًا العنصر الزائف: الطفل الأول.بدلاً من الحصول على الصف الأول، سيكون لديك هذا.

span:first-child {
    width: auto;
}

من الواضح أن هذا لا ينطبق إلا على قائمة سطر واحد.