العنصر على مستوى الكتلة العائمة: هل من الضروري ضبط العرض ، إذا كانت الإجابة بنعم ، كيف؟

Question

قل أن لدي مربعات نصية وقوائم منسدلة وإرسال الأزرار. انهم جميعا عناصر مضمنة. مما يعني أنه ينبغي تجاهل الهامش "رسميًا" والحشو والعرض والارتفاع (في الممارسة العملية ليس حقًا). إذا كنت سأذهب بالطريقة الصحيحة لتعيين الارتفاع على زر ، فسأكتب شيئًا مثل العرض: قم بحظر ثم تحديد الارتفاع. ولكن هناك اعتبارات مفادها أن عنصر مستوى الكتلة سوف يوسع نفسه بشكل غير متوقع ، لذا من الأفضل أن أضع عرضه على بعض القيمة الثابتة. المشكلة هي أنني لا أعرف عرضها لأنه يمكن تعريفه ديناميكيًا على نص الزر.

سيناريو آخر: أود إنشاء قائمة عبر <ul> و <li>. أريد أن أكون محاذاة أفقيا ، مع تجميع بعض العناصر على اليسار ، ومع عدد قليل من التمدد إلى اليمين. كلاهما <ul> و <li> هي عناصر على مستوى الكتلة. نظرًا لأنني أتمنى أن تأخذ قائمتي جميع المساحة الأفقية المتاحة ، ثم للعب مع ارتفاع العناصر ودفع عناصر القائمة إلى كلا الجانبين ، فإن وضع الكتلة جيد بالنسبة لي. سأستخدم الطوائف فقط: اليسار والتعويم: الحق في تحقيق المهمة. ولكن مرة أخرى ، يجب أن تضع استخدام نوعًا ما لعناصر القائمة ، لأنها عناصر حظر. لا أعرف عروضهم لأن نص العناصر يمكن أن يختلف. ولكن يبدو أن كل شيء أصبح على ما يرام كما هو.

لم ألاحظ أي مشكلات مع كل من العناصر المضمّنة التي أجبرت على تقديم عناصر الحظر دون أن يتم تعويمها أو مجموعة العرض ، أو مع مثال عنصر القائمة. إنه يعمل بشكل جيد في IE7 و FF3 و Opera 9 و Safari مهما كان الإصدار الحالي. يبقى السؤال: هل يجب أن تقلق بشأن هذه العناصر المضمّنة إلى الكتل أو عناصر الكتلة الحقيقية التي تم طرحها ولكن بدون مجموعة العرض أو ترك كل شيء كما هو؟ هل أفتقد شيئًا أم أنه مجرد واحد من تلك الأشياء التي لا ينبغي أن تتوقعها ببساطة؟

Answer 1

قل أن لدي مربعات نصية وقوائم منسدلة وإرسال الأزرار. انهم جميعا عناصر مضمنة. مما يعني أنه ينبغي تجاهل الهامش "رسميًا" والحشو والعرض والارتفاع (في الممارسة العملية ليس حقًا). إذا كنت سأذهب بالطريقة الصحيحة لتعيين الارتفاع على زر ، فسأكتب شيئًا مثل العرض: قم بحظر ثم تحديد الارتفاع. ولكن هناك اعتبارات مفادها أن عنصر مستوى الكتلة سوف يوسع نفسه بشكل غير متوقع ، لذا من الأفضل أن أضع عرضه على بعض القيمة الثابتة. المشكلة هي أنني لا أعرف عرضها لأنه يمكن تعريفه ديناميكيًا على نص الزر.

إلا إذا كنت تشير إلى المراوغات النموذجية لصندوق Internet Explorer, ، لا ينبغي أن تكون قلقًا بشأن أي شيء يتوسع أو التعاقد بشكل غير متوقع. طالما أنك تهتم التطبيع لتباين المتصفح, ، سوف تكون بخير. إذا كان لديك تأثير جانبي غير متوقع وغير مرغوب فيه على طول الطريق لتصميم المجد ، فأنت تصححه ، لأن هذا خطأ في المبرمج الذي تتعامل معه. يمكن أن تكون CSS غريبة ، لكن هذا ليس عذرًا مناسبًا بنسبة 95 ٪ من الوقت لمعظم المتصفحات الرئيسية. 5 ٪ الأخرى التي لا نتحدث عنها.

هكذا أفهم مشكلتك:

تريد قائمة من الطوائف <li> بحيث يكون لديك قائمة أفقية تمتد على عرض منفذ العرض (ما يراه المستخدم الخاص بك "في نافذة المتصفح") ليكون باستمرار العرض الكامل لمنفذ العرض.

يبدو أنك تفكر من حيث تصميم العرض الثابت ، عندما يكون ما يبدو أنه يناسب أغراضك هو تصميم عرض السوائل. هذا يعني أنك تقوم بإنشاء تصميم "مرن" ويتوسع ويتأرجح فيما يتعلق بحجم نافذة متصفح المستخدم. إذا قمت بإنشاء تصميمك المتوقع يتم تعيين عروض البكسل على كل عنصر ، فيمكنك أن تجد طريقة أنيقة للحفاظ على رأس وتنقل عرض السوائل ، ولكن لديك منطقة محتوى رئيسية ذات عرض ثابت. يمكنك العثور على وسيلة سعيدة دون إعادة تصميم كاملة. من المحتمل أن يكون هذا الإرشادات هو ما تبحث عنه. جيد شرح المصطلحات ذات العرض الثابت وعرض السوائل يمكن العثور عليها هنا إذا لم تكن على دراية بالمصطلحات وتريد إلقاء نظرة فاحصة على هذه الأفكار.

أكثر واحد للطريق:

تحديد عرض على جميع العناصر العائمة لا ينصح به فحسب ، بل هو جزء من معيار CSS2 وفقًا لـ W3C.

• أنجلينا

Answer 2

أنت تحصل على المزيد من الإجهاد على ما أعتقد :)

الدفع هؤلاء الروابط, ، وخاصة 9.4 ، 9.5 و 10.3. و Ctrl-F "كتلة مضمنة"

Answer 3

إذا اتخذنا الخط "الرسمي" الذي ذكرته ، فإن الحياة سهلة لأننا لا نحتاج إلى القلق بشأن العروض والارتفاعات وفي هذه العناصر.

لا تظن Pixel مثاليًا ، لا تقلق بشأن minutia من العرض التقديمي ، اتبع المعايير ، والسماح للمتصفح ومستخدميه بتحديد الأنماط ...

(إذا كان الأمر كذلك حقًا في العالم الحقيقي "غير المتبادلة")

Answer 4

حسنًا ، أفترض أن سؤالي لم يكن مفهوماً بشكل صحيح. ماذا سيحدث إذا لم أقم بعرض الصناديق العائمة؟ لا يمكنني ضبطه ، أنا لا أعرف ذلك. لأنه يعتمد على المحتوى. هل ستتقلص جميع الصناديق فقط إلى عرض المحتوى الخاص بها؟ هذه هي الطريقة التي تعمل بها في الممارسة. وأنا راضٍ عنها. هل هناك أي تأكيد رسمي بأن هذا السلوك يجب أن يتوقع؟

وأضاف: أنا foudn شيء مثير للاهتمام هنا: http://www.webmasterworld.com/css/3811603.htm

أقترح التحقق من التوصيات المتعلقة بتوضيح أكثر تقنية للاختلافات ، ولكن ببساطة ، تم تغيير سلوك العوامات بين CSS2 (1998) و CSS2.1 (بضعة أشهر من عام 2005 ، ثم 2007). لكل CSS2 ، كان من الضروري وضع عرض على العوامات ، في حين أن "التخلص من الانكماش" الذي تراه في FF3 هو CSS2.1. وهذا يعني أن متصفحات ما قبل يوليو/2007 تتوافق مع التوصية ذات الصلة بوقت التصنيع عندما تمتد على حاوية Div#عرض المنافذ الكاملة. (الذي لا يفسر الأوبرا ، لكنه دائمًا ما يفعل شيء خاص به.)

إذا كان الأمر كذلك ، فأنا منافسة. كما ذكرت ، فإنه يعمل في IE7 و FF3 و Opera 9 و Safari.

المزيد من التعليقات؟

Answer 5

(على افتراض إذا فهمت مشكلة)

في معظم الحالات ، لا تحتاج إلى تعيين عرض على عناصر القائمة. ولكن (نعم ، هناك ولكن هنا) إذا كان لديك رابط مع شاشة: كتلة (دعنا نقول أنك تريد استخدام الباب المنزلق) عليك القيام بخيلة صغيرة:

HTML:

<ul class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

و CSS:

.menu li {
    float:left
}
    .menu li a {
        display:block;
    }
    /* ===================== */
    /* = and the IE6 trick = */
    /* ===================== */ 
    * html .menu li a {
        width:1%;
        white-space:nowrap;
    }

إذا لم تفعل مثل هذا ، فسيتم تمديد الرابط إلى جميع الوالدين. الرابط وليس عنصر القائمة ؛) القيام بهذه الطريقة تقوم بتعيين "عرض دقيقة" على IE6 ولن تواجه أي مشاكل أخرى.