내 목록 항목 글 머리 기호가 부동 요소와 겹치는 이유
일반 텍스트 단락과 함께 이미지를 띄우는 (XHTML Strict) 페이지가 있습니다. 단락 대신 목록을 사용하는 경우를 제외하고는 모두 잘 진행됩니다. 목록의 글 머리 기호가 부동 이미지와 겹칩니다.
목록의 여백이나 목록 항목을 변경해도 도움이되지 않습니다. 여백은 페이지의 왼쪽에서 계산되지만 float는 목록 항목을 자체 내부 의 오른쪽으로 푸시합니다 li. 따라서 여백은 이미지보다 넓게 만드는 경우에만 도움이됩니다.
이미지 옆에 목록을 플로팅해도 작동하지만 목록이 플로트 옆에 언제 있는지 모르겠습니다. 이 문제를 해결하기 위해 콘텐츠의 모든 목록을 띄우고 싶지 않습니다. 또한 떠 다니는 왼쪽은 이미지가 목록의 왼쪽 대신 오른쪽으로 떠오를 때 레이아웃을 엉망으로 만듭니다.
설정 li { list-style-position: inside }하면 글 머리 기호가 내용과 함께 이동하지만 줄 바꿈이 위 줄과 일치하지 않고 글 머리 기호와 정렬되기 시작합니다.
총알이 상자 바깥쪽으로 렌더링되고 상자의 내용물이 상자 자체가 아닌 오른쪽으로 상자의 내용물을 밀어 넣음으로써 문제가 발생합니다. 이것은 IE와 FF가 상황을 처리하는 방법이며, 내가 아는 한 사양에 따라 잘못되지 않았습니다. 문제는 어떻게 방지 할 수 있습니까?
이 문제에 대한 해결책을 찾았습니다. 적용 ul { overflow: hidden; }받는 ul대신 상자의 내용의 박스 자체가 플로트에 의해 옆으로 밀어 보장하지만합니다.
ul { zoom: 1; }조건부 주석 에는 IE6 만 있으면 ul레이아웃이 있어야 합니다.
Glen E. Ivey의 솔루션 개선 사항 추가 :
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: 1em해야합니다 li.
"디스플레이"속성이있는 곳입니다. 플로팅 된 컨텐츠와 함께 목록이 작동하도록 아래 CSS를 설정하십시오.
디스플레이 : 테이블; 부동 컨텐츠와 함께 작동하지만 (갭을 채움) 컨텐츠를 숨기지 않습니다. 테이블처럼 :-)
.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"또는보다 일반적으로 ".content ul"
글 머리 기호의 레이아웃을 변경하려면 list-style-position : inside 를 시도 하십시오 .
에서 http://archivist.incutio.com/viewlist/css-discuss/106382 스타일을 가진 '리'요소 : 나는 나를 위해 일한 제안을 발견 :
position: relative;
left: 1em;
"1em"을 부동이 존재하지 않을 경우 목록 항목이 가질 수있는 왼쪽 패딩 / 여백의 너비로 대체합니다. 이것은 내 응용 프로그램에서 효과적이며, 플로트의 맨 아래가 목록의 중간에서 발생하는 경우를 처리합니다. 총알이 오른쪽 (로컬) 왼쪽 여백으로 다시 이동합니다.
적어도 나를 overflow: auto;위해 당신의 ul작품에 추가함으로써 .
최신 정보
무슨 일인지 시각화하기 위해 jsfiddle 을 업데이트 했습니다. 을 갖는 경우 ul플로팅 옆 img의 내용은 ul실제 용기 플로트에 밀려 아닌 것이다. overflow: auto전체 ul-box 를 추가 하면 내용이 아닌 float에 의해 푸시됩니다.
왜 overflow: hidden작동
솔루션은 다음과 같이 쉽습니다.
ul {overflow: hidden;}
overflow:이외 의 블록 상자 는 내용에 대한 visible 새로운 블록 서식 컨텍스트 를 설정합니다. W3C 권장 사항 : http://www.w3.org/TR/CSS2/visuren.html#block-formatting
예:
변장 한 내 웹 사이트 의 버튼 <li>은 다음과 같습니다. 들여 쓰기 가 실제로 표시되도록 브라우저의 뷰포트 (창)를 더 작게 만듭니다.
관련 답변 :
예제가 포함 된 기사 :
에 할당 position: relative; left: 10px;할 수 li있습니다. (추가로을 제공 margin-right: 10px;할 수도 있습니다. 그렇지 않으면 오른쪽에서 너무 넓어 질 수 있습니다.)
당신이 사용하려는 경우 또는 float을 위해 ul다른 사람에 의해 제안 - - 당신은 아마 사용하여 UL의 권리를 부동에서 휴식을 중지 할 수 있습니다 clear: leftUL 인증을 다음 요소에.
이 문제를 해결하기 위해 이것을 사용하고 있습니다.
ul {
display: table;
}
기권
부동 요소 옆에있는 목록은 문제를 일으 킵니다. 제 생각에는 이러한 종류의 플로팅 문제를 방지하는 가장 좋은 방법은 콘텐츠와 교차하는 플로팅 이미지를 피하는 것입니다. 반응 형 디자인을 지원해야 할 때도 도움이됩니다.
단락 사이에 이미지를 중앙에 배치하는 단순한 디자인은 너무 매력적으로 보이고 지원하기가 훨씬 쉬워집니다. 또한 한 걸음 떨어져 있습니다 <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>This technique has a few problems though. If the list gets long, it doesn't actually wrap around the image, which pretty much defeats the entire purpose of using float on the image.
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>But I really want wrapping lists!
Ok, so if you're even crazier more persistent and you absolutely must continue down this path, there's another technique that can be used to wrap the list items and maintain bullets.
Instead of padding the <ul> and trying to get it to behave nicely with bullets (which it never seems to want to do), take those bullets away from the <ul> and give them to the <li>s. Bullets are dangerous, and the <ul> just isn't responsible enough to handle them properly.
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>This wrapping behavior can do weird things to complex content, so I don't recommend adding it by default. It's much easier to set it up as something that can be opted into rather than something that has to be overridden.
Try the following on your UL tag. This should take care of the bullets overlaying your image and you don't have to mess up your left allignment caused by list-position: inside.
overflow: hidden;
padding-left: 2em;
Struggled with this myself. Best I've managed is the following:
ul {
list-style-position: inside;
padding-left: 1em;
text-indent: -1em;
}
The text is not actually indented but the bullet shows.
Edited to update based on OP's comment
ok, then just break it up into 2 divs nested together
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>
try changing the ul li css to
ul {float:left; background: blue; }
After fighting with this interesting issue in several projects, and investigating why it happens, I finally believe I found both: a working and 'responsive' solution.
Here is the magic trick, live example: 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 */
}
Working inside an LMS without access to head of doc, found it easier to go with margin-right: 20px as an inline style for the image. Which I owe to this site.
try this:
li{
margin-left:5px;
}
If you want them to go left, just put in a -##px value.
or you could do this:
#content ul {
background:none repeat scroll 0 0 #AACCDD;
float:left;
margin-right:10px;
padding:10px;
and then remove all the styling from the li
How about this?
ul{float:left; clear:right}
width: 300px;
height: 30px;
margin-left: auto;
right: 10px;
margin-left: auto will cause the element itself to be right aligned. Set height and width of the element you want - in my it's a background image in a div inside
You could try also floating the ul to the left, and define an appropriate width for it, so that it floats next to the image.
Something a little like this jsfiddle?
I fixed it with
div.class-name ul {
clear: both;
}
width: auto; overflow: hidden;
Add display:table; to ul:
ul{display:table;}
참고URL : https://stackoverflow.com/questions/710158/why-do-my-list-item-bullets-overlap-floating-elements
'Programing' 카테고리의 다른 글
| gradle을 사용하여 APK 파일 이름에서 versionName을 설정하는 방법은 무엇입니까? (0) | 2020.06.04 |
|---|---|
| Cordova 명령 행 인터페이스를 사용하여 서명 된 APK 파일을 작성하는 방법은 무엇입니까? (0) | 2020.06.04 |
| SqlAlchemy 결과를 JSON으로 직렬화하는 방법은 무엇입니까? (0) | 2020.06.04 |
| 화웨이, logcat이 내 앱의 로그를 표시하지 않습니까? (0) | 2020.06.04 |
| iTunes는 URL 및 iOS 7을 검토합니다 (사용자에게 앱을 평가하도록 요청) .AppStore에 빈 페이지가 표시됨 (0) | 2020.06.04 |