بدائل غير مشروعة <br> أو <p> داخل <li> العلامات على والطواف ؟

StackOverflow https://stackoverflow.com/questions/427721

سؤال

هل من أحد لديه اقتراح إنشاء الفقرة-نوع الخط المساحات داخل <li> الوسم الذي يتضمن حامت المنبثقة الزائفة الصف ؟

لدي <span> أن الملوثات العضوية الثابتة حتى على a:hover و أنا أريد النص الذي دفعها إلى كسر في الفقرتين 2.أنه يعمل مع <br> في FF ولكن أريد أن أفعل الشيء الصحيح (الآن اكتشفت انها خطأ!)...

html:

<div id="rightlist">
  <ul>
      <li><a href="">List item
          <span>
             words words words that are "paragraph" 1 of List item
             <br><br>
             different words that make up "paragraph" 2 of List item
          </span></a></li>

css:

#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell; 
z-index: 100 ;
    float: right ;
}

#rightlist ul {
  text-align: left;
margin: 0;
   margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: black ;
}

#rightlist a 
{
    display: table-cell;
text-decoration: none; color: black; 
background: #7EBB11 ; 
}

/*appearance of the <a> item (but before the <span> tag) on hover*/
#rightlist a:hover {
color: white;
}

/*appearance of the spanned content within <a></a> tags when not hovered */
/* %%%%% important - keep position:absolute in this div %%%%% */
#rightlist a span {
display: none;
position: absolute ;
margin-left: -412px;
top: -10px; left: 10px; padding: 10px ;
z-index: 100;
width: 380px; height: 222px; 
color: white;  background-color: #7EBB11;
font: 0.75em Verdana, sans-serif; font-size: 13px ; color: black;
text-align: left;
}



/*appearance of spanned content within <a> tags when hovered*/
#rightlist a:hover span {
display: table-cell ;
}
هل كانت مفيدة؟

المحلول

وقد تنشأ مشكلة لديك من حقيقة أن كنت تستخدم علامة بشكل غير صحيح.

من المفترض

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

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

نصائح أخرى

يخطئ لا يوجد شيء خاطئ مع وجود <br> داخل <a> أو <span>.انها صالحة تماما وفقا HTML 4.01 المواصفات.

تحرير: <li> يمكن أن تحتوي على <p>, <br>, و الى حد كبير أي شيء آخر.

المواصفات هو قليلا من الصعب قراءة ولكن في الأساس يقول:

  • LI يمكن أن تحتوي على block أو inline
  • block مصنوع من P + بعض الأشياء الأخرى
  • inline مصنوع من special + بعض الأشياء الأخرى
  • special مصنوع من A + BR + بعض الأشياء الأخرى

فيما يتعلق <a> يقول:

  • A يمكن أن تحتوي على inline إلا A
  • inline...انظر أعلاه

هل يمكن أن عصا تمتد آخر هناك بأنها "وهمية" بطاقة ص:

  <li><a href="">List item
      <span>
         <span>words words words that are "paragraph" 1 of List item</span>
         <span>different words that make up "paragraph" 2 of List item</span>
      </span></a></li>

وفي المغلق الخاص بك:

#rightlist span span {display:block;margin:...}

<قوية> ملاحظة أي شيء قمت بتعريف ل#rightlist span سوف تنطبق على #rightlist span span، لذلك قد تحتاج إلى تجاوز بعض القواعد في #rightlist span span.

لماذا هو "خطأ"؟

ربما ينبغي أن يكون ترميز

العلامة ر ك:

 <br />

لماذا هو الطريقة الحالية خاطئة؟

ويمكنك أن تجرب هذا

<span>
  <p>words words words that are "paragraph" 1 of List item</p>
  <p>different words that make up "paragraph" 2 of List item</p>
</span>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top