목록 항목 총알이 부동 요소와 겹치는 이유
일반 텍스트 단락과 함께 이미지를 띄우는 (XHTML Strict) 페이지가 있습니다.단락 대신 목록을 사용하는 경우를 제외하고는 모든 것이 잘 진행됩니다.목록의 총알이 플로팅된 이미지와 겹칩니다.
목록 또는 목록 항목의 여백을 변경해도 도움이 되지 않습니다.여백은 페이지의 왼쪽에서 계산되지만 플로트는 목록 항목을 안쪽의 오른쪽으로 밀어냅니다.li◦ 자체. 그래서 더 .그래서 여백은 이미지보다 더 넓게 만들어야 도움이 됩니다.
이미지 옆에 목록을 띄우는 것도 효과가 있지만 언제 목록이 띄우기 옆에 있는지는 모릅니다.저는 이것을 고치기 위해 제 컨텐츠의 모든 목록을 띄우고 싶지 않습니다.또한 왼쪽으로 이동하면 이미지가 목록의 왼쪽이 아닌 오른쪽으로 이동하면 레이아웃이 엉망이 됩니다.
설정 li { list-style-position: inside }는 내용물과 함께 탄환을 이동시키지만, 위의 선에 정렬하는 대신 탄환에 정렬되는 줄이 시작되도록 합니다.
문제는 분명히 총알이 상자 밖에서 렌더링되고, 플로트가 상자의 내용물을 오른쪽으로 밀어 넣으면서 발생합니다(상자 자체가 아니라).IE와 FF는 이렇게 상황을 처리하며, 제가 알기로는 스펙상 틀린 것은 아닙니다.문제는 어떻게 하면 예방할 수 있을까 하는 것입니다.
저는 이 문제에 대한 해결책을 찾았습니다.하기를 ul { overflow: hidden; }ul는 상자의 내용물 대신 상자 자체가 플로트에 의해 옆으로 밀려나도록 합니다.
IE6 합니다가 합니다.ul { zoom: 1; }우리의 조건부 의견들에서 그것을 확실히 하기 위해.ul레이아웃이 있습니다.
ul {
list-style: outside disc;
margin-left: 1em;
}
ul li {
position: relative;
left: 1em;
padding-right: 1em;
}
http://jsfiddle.net/mblase75/TJELt/
저는 이 기술을 선호합니다. 왜냐하면 목록이 플로팅 이미지를 중심으로 흘러야 할 때 작동하는 반면,overflow: hidden기술은 안 됩니다.나,한,가도 .padding-right: 1emli그들의 용기가 넘쳐나는 것을 막기 위해서입니다.
여기서 "디스플레이" 속성이 고유하게 나타납니다.아래 CSS를 설정하여 목록이 플로팅된 내용과 함께 작동하도록 합니다.
display: table; floated content와 함께 작동하지만(틈새를 막음) 그 뒤에 내용을 숨기지 않습니다.테이블이 하는 것처럼 :-)
.img {
float: left;
}
.table {
display: table;
}<img class="img" src="https://via.placeholder.com/350x350" alt="">
<ul>
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>
<ul class="table">
<li>Test content</li>
<li>Test content</li>
<li>Test content</li>
</ul>편집: "ul.in -content" 또는 일반적으로 "contentul"과 같은 목록을 분리할 클래스를 추가해야 합니다.
목록 스타일의 위치: inside를 시도하여 총알의 레이아웃을 변경합니다.
overflow: hidden작동하다
솔루션은 다음과 같이 간단합니다.
ul {overflow: hidden;}
블록박스.overflow:visible 내용에 대한 새로운 블록 형식 지정 컨텍스트를 설정합니다.W3C 권장 사항: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
예
내 웹사이트에 있는 버튼들은<li>변장을 하면 이렇게 만들어집니다.브라우저의 뷰포트(창)를 작게 만들어 들여쓰기를 실행 중으로 볼 수 있습니다.
관련답변
예문이 있는 기사
http://archivist.incutio.com/viewlist/css-discuss/106382 에서 저는 'li' 요소를 다음과 같이 스타일화해야 한다는 저에게 효과적인 제안을 발견했습니다.
position: relative;
left: 1em;
플로트가 없을 경우 목록 항목이 가질 수 있는 왼쪽 패딩/마진의 폭으로 "1em"을 대체할 수 있습니다.이것은 심지어 목록의 중앙에서 플로트 바닥이 발생하는 경우에도 적용할 수 있습니다. 총알이 (지역) 왼쪽 여백으로 다시 이동하는 경우도 처리할 수 있습니다.
를 overflow: auto;에게에ul적어도 저한테는 통합니다.
갱신하다
무슨 일이 일어나고 있는지 시각화하기 위해 jspiddle을 업데이트했습니다.가지고 있을 때.ule img, 의 의 ul플로트에 의해 밀리지만 실제 컨테이너는 밀리지 않습니다.를 overflow: auto으로 전체ul-박스는 내용물만이 아닌 플로트에 의해 푸시됩니다.
당신은 할당할 수 있습니다.position: relative; left: 10px;li(으로 a를 할 수 . (으로 은 을 은 을 으로 )margin-right: 10px; 수 이 )
아니면, 사용하고 싶은 경우float을 위하여ul처럼 -- 는 --한럼이을은도는을다의을 UL수을을다수-sgtefypd-yegnlumyts을는을른 clear: leftUL 뒤에 오는 요소에.
부인
플로팅된 요소 옆의 목록은 문제를 야기합니다.저는 이러한 부동의 문제를 방지하는 가장 좋은 방법은 콘텐츠와 교차하는 부동의 이미지를 피하는 것이라고 생각합니다.반응형 디자인을 지원해야 할 때도 도움이 됩니다.
단락 사이에 중심 이미지를 갖는 단순한 디자인은 매우 매력적으로 보이고 너무 화려해지려고 하는 것보다 훨씬 지원하기 쉬울 것입니다.그것은 또한 한 발짝 떨어져 있습니다.<figure>.
하지만 저는 정말 떠있는 이미지를 원해요!
좋아요, 당신이 이 길을 계속 갈 만큼 정신없이 고집을 부린다면, 몇 가지 기술을 사용할 수 있습니다.
가장 간단한 것은 목록을 사용하는 것입니다.overflow: hidden아니면overflow: scroll목록을 기본적으로 축소 래핑하여 패딩을 유용한 위치로 되돌리도록 합니다.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>하지만 이 기술은 몇 가지 문제점이 있습니다.에 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ ΔΔ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ, Δ float이미지상으로
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>하지만 나는 포장 목록이 너무 갖고 싶어요!
좋아요, 만약 당신이 더욱 더 정신이 이상해서 이 길을 계속 가야 한다면 목록 항목을 포장하고 총알을 유지하는 데 사용할 수 있는 다른 기술이 있습니다.
을 에 에를 <ul>그리고 총알로 멋지게 행동하게 하려고 노력하고 있습니다. (절대 하고 싶지 않은 것처럼 보입니다.) 그 총알들을 가져갑니다.<ul>그리고 그들을 그들에게 줍니다.<li>하고, s. 은, <ul>그들을 제대로 다룰 만큼 책임감이 부족할 뿐이죠
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>이러한 래핑 동작은 복잡한 내용에 이상한 영향을 줄 수 있으므로 기본적으로 추가하는 것은 권장하지 않습니다.무시해야 하는 것보다는 선택할 수 있는 것으로 설정하는 것이 훨씬 쉽습니다.
저는 이 문제를 해결하기 위해 이것을 사용하고 있습니다.
ul {
display: table;
}
UL 태그에 다음을 시도해 보십시오.이렇게 하면 이미지에 겹쳐지는 총알을 처리할 수 있고 다음으로 인해 발생하는 왼쪽 정렬을 엉망으로 만들 필요가 없습니다.list-position: inside.
overflow: hidden;
padding-left: 2em;
나도 이 일 때문에 고생했어요.최선의 방법은 다음과 같습니다.
ul {
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}
글은 실제로 들여놓은 것이 아니라 총알이 보여요.
여러 프로젝트에서 이 흥미로운 문제를 해결하고, 왜 이런 일이 일어나는지 조사한 결과, 효과적인 해결책과 '반응형' 해결책을 모두 찾았다고 생각합니다.
다음은 마술입니다. 라이브 예시: http://jsfiddle.net/superKalo/phabbtnx/
ul {
list-style: none;
position: relative;
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
left: 35px;
}
li {
padding-left: 0; /* remove any left padding */
margin-left: 0; /* remove any left margin */
text-indent: -19px; /* adjust as much as needed */
}
li:before {
content: '•\00a0\00a0\00a0';
color: #000; /* bonus: you can customize the bullet color */
}
OP의 코멘트를 바탕으로 업데이트하도록 편집됨
좋아요, 그럼 그냥 2개의 디브로 나누면 돼요
ul {background: blue; position:static;}
.therest {position:relative; width:100%}
.indent {float:left; }
<div class="therest">
<p>
Est tincidunt doming iis nobis nibh. Ullamcorper eorum elit lius me delenit.
</p>
<hr />
<h3>Lorem</h3>
<div class="indent">
<ul>
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
<div>
the rest now under the UL
</div>
을 바꿔 보다
ul {lot:left; 배경: 파란색; }
문서 책임자에 대한 접근 없이 LMS 내부에서 작업을 수행함으로써 작업을 보다 쉽게 수행할 수 있음을 발견했습니다.margin-right: 20px이미지의 인라인 스타일로.내가 이 사이트에 빚진 거지
시도해 보십시오.
li{
margin-left:5px;
}
왼쪽으로 이동하려면 -##px 값만 입력하면 됩니다.
아니면 당신이 할 수 있습니다.
#content ul {
background:none repeat scroll 0 0 #AACCDD;
float:left;
margin-right:10px;
padding:10px;
리에서 모든 스타일링을 제거합니다.
이건 어때?
ul{float:left; clear:right}
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;
margin-left: auto는 요소 자체를 오른쪽 정렬 상태로 만듭니다.원하는 요소의 높이와 너비 설정 - 내 안에 디브 안에 배경 이미지가 있습니다.
당신은 또한 물을 띄우는 것을 시도할 수 있습니다.ul으로,고한을다n을고한o로,edwidth이미지 옆에 뜰 수 있게 해줍니다.
이 jsfiddle같은거?
로 고쳤습니다.
div.class-name ul {
clear: both;
}
width: auto; overflow: hidden;
더하다display:table;ul:
ul{display:table;}
언급URL : https://stackoverflow.com/questions/710158/why-do-my-list-item-bullets-overlap-floating-elements
'programing' 카테고리의 다른 글
| mysql에 빅데이터를 저장하는 방법은? (0) | 2023.09.18 |
|---|---|
| Github - 사이드밴드 패킷을 읽는 동안 예기치 않은 연결 끊김 (0) | 2023.09.18 |
| pdo가 와일드카드로 준비한 문 (0) | 2023.09.18 |
| AJAX를 통해 비디오를 읽은 후 blob을 (0) | 2023.09.18 |
| 재작성이 있는 동일한 슬러그를 사용하는 사용자 지정 게시물 유형 및 분류법 (0) | 2023.09.18 |