'p' 태그 문제가 있는 html CSS 목록

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

  •  20-12-2019
  •  | 
  •  

문제

우리는 'p' 태그 바로 뒤에 목록(li 태그)이 많이 있습니다.

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

IE8에서는 문제가 되지 않았습니다.목록 이미지와 텍스트가 정렬되었습니다.그러나 IE10에서는 텍스트와 목록 아이콘이 정렬되지 않습니다(호환성 보기에서 정렬됨).

이러한 'p' 태그를 제거하는 것이 해결책이지만 여러 위치에 있으므로 불가능합니다.

어떻게 해결하나요?

정말 감사하겠습니다.

'li' 태그 뒤에 'a' 태그가 붙어 있기 때문인 것으로 알고 있습니다.하지만 제거할 수는 없습니다.html 페이지가 자동으로 생성됩니다.

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 }

HTML 파일 예:

<?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>

안부 증권 시세 표시기

도움이 되었습니까?

해결책

이는 다음으로 인해 발생합니다. div, 이는 블록이므로 인라인 다음에 새 줄에서 시작하려고 합니다. a, 경우에도 a 비어 있습니다(이전 버전에서는 무시되었을 수 있음).

해결책:켜다 div 인라인 블록으로 만들어서 같은 줄에 놓이게 합니다. a, 오른쪽에 있습니다.즉, CSS에 다음을 추가하세요.

ul a + div {display:inline-block}

보다 http://jsfiddle.net/MrLister/6RPsN/

편집하다:아니면 당신의 일부 a 요소에는 콘텐츠가 있으므로 다음 div 위에 자체 줄에 앉아야 합니다. :empty CSS에 추가하여 다음에서만 작동하도록 합니다. a내용이 없습니다.

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

그래도 이것이 작동해야 하는 IE 버전에서 작동하는지 확실하지 않습니다.여기서 모두 테스트할 수는 없습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top