HTML-CSS-Liste mit „p“-Tag-Problem

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

  •  20-12-2019
  •  | 
  •  

Frage

Wir haben viele Listen (li-Tag), direkt gefolgt vom „p“-Tag.

<ul>
<li>
   <p>in paragraph</p>
</li>
</ul>

Im IE8 war das kein Problem.Das Listenbild und der Text wurden ausgerichtet.Aber in IE10 sind Text und Listensymbol nicht ausgerichtet (in der Kompatibilitätsansicht ausgerichtet).

Das Entfernen solcher „p“-Tags ist eine Lösung, die wir jedoch an vielen Stellen haben und daher nicht möglich sind.

Wie löse ich es?

Ich werde es wirklich zu schätzen wissen.

Mir ist aufgefallen, dass es am Tag „a“ nach dem Tag „li“ liegt.Aber ich kann es nicht entfernen.HTML-Seiten werden automatisch generiert.

CSS:

html{color:#000;background:#FFF;}
body,div,h1,h2,h3,h4,h5,h6,pre,code,form,img{border:0;}
address,caption,cite,code,em,th{font-style:normal;font-weight:bold;}
caption,th{text-align:center;}
h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
/* fonts */
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

 html {background-color: white; 
 scrollbar-shadow-color: white;
scrollbar-highlight-color: white;
scrollbar-face-color: white;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: white;
scrollbar-track-color: white;
scrollbar-arrow-color: white;}
Scrollbar hiding*/
   body { font-family: arial;}
  .familylinks {font-family: arial; padding-top:1.75em;} 
  .tablenoborder { margin: 0.5em;}
  .tablecustom{margin-left:-0.4em;}

  .p ol{margin-top: 0em;}


  ul.simple { list-style-type: none }
  ul { list-style-type: disc; list-style-position: outside; padding-bottom: 0.02em; margin-top:-0.05em;}/*--padding-bottom:0.15 changed to 0.05*/

  ol li { margin-left: -1.05em; padding-bottom: 0.25em;}
  ol li p{margin-top:-0.00005em;}
  li p{margin-top:-0.00005em;padding-top:0em;color:red}
  ol.customlists { margin-top: -0.5em}
  ol.customlists { margin-top: -0.25em}
  ol.h2custom{margin-top: 0.5em}
  ol.olcustom{margin-left:2.6em;}
  ul.ulcustom{margin-left:2.6em}

/* Various basic phrase styles */
  .bold { font-weight: bold; }
  .boldItalic { font-weight: bold; font-style: italic; }
  .italic { font-style: italic; }
  .underlined { text-decoration: underline; }


/* Align images based on @align on topic/image */
  div.imageleft { text-align: left }
  div.imagecenter { text-align: center; margin-top: 1em; margin-bottom: 1em; }
  div.imageright { text-align: right }
  div.imagejustify { text-align: justify }

Beispiel für eine HTML-Datei:

<?xml version="1.0" encoding="UTF-8"?>
<html lang="en-us" xml:lang="en-us">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link rel="stylesheet" type="text/css" href="layout.css"/>
        <title>Numbering &amp; Bullets</title>
        </head>
        <body>
  <h1>Numbering &amp; Bullets</h1>
  <div>
     <div class="p"><strong>Bullets Test</strong>.</div>

     <ul>
        <li><a><!-- --></a>
          <div><p>in paragraph</p></div>
        </li>
        <li><a><!-- --></a>blha blha blha
        </li>
  </div>
</body>
</html>

Grüße, RNV

War es hilfreich?

Lösung

Dies wird durch die verursacht div, bei dem es sich um einen Block handelt, der also in einer neuen Zeile nach der Inline beginnen möchte a, auch wenn die a ist leer (und wäre von älteren Versionen ignoriert worden).

Lösung:drehe die div in einen Inline-Block, so dass er in derselben Zeile wie der steht a, rechts davon.Mit anderen Worten, fügen Sie Folgendes zu Ihrem CSS hinzu:

ul a + div {display:inline-block}

Sehen http://jsfiddle.net/MrLister/6RPsN/

Bearbeiten:oder wenn einige von Ihnen a Elemente haben Inhalt und müssen in einer eigenen Zeile über dem folgenden Div stehen, fügen Sie hinzu :empty an das CSS angepasst, so dass es nur weiter funktioniert as ohne Inhalt.

ul a:empty + div {display:inline-block}

Ich bin mir jedoch nicht sicher, ob dies in den IE-Versionen funktioniert, in denen es funktionieren sollte.Ich kann hier nicht alle testen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top