Mam stronę (XHTML Strict), na której umieszczam obraz obok zwykłych akapitów tekstu. Wszystko idzie dobrze, z wyjątkiem sytuacji, gdy zamiast akapitów używana jest lista. Punktory listy nachodzą na pływający obraz.

Zmiana marginesu listy lub elementów listy nie pomaga. Margines jest obliczany od lewej strony, ale pływak wypycha elementów listy na prawo wewnątrz w lisobie. Tak więc margines pomaga tylko wtedy, gdy poszerzę go niż obraz.

Pływak listy obok obrazu również działa, ale nie wiem, kiedy lista znajduje się obok pływaka. Nie chcę przesuwać każdej listy w mojej zawartości, aby to naprawić. Ponadto ruch w lewo powoduje zakłócenie układu, gdy obraz jest przesuwany w prawo zamiast na lewo od listy.

Ustawienie li { list-style-position: inside }przenosi punktory wraz z zawartością, ale powoduje również, że zawijane wiersze zaczynają się w linii z punktorem, a nie w linii powyżej.

Problem jest oczywiście spowodowany wyrenderowaniem pocisku na zewnątrz pudełka, a pływak wypycha zawartość pudełka w prawo (nie samo pudełko). W ten sposób IE i FF radzą sobie z tą sytuacją i o ile wiem, nie źle zgodnie ze specyfikacją. Pytanie brzmi, jak mogę temu zapobiec?

Znalazłem rozwiązanie tego problemu. Zastosowanie znaku an ul { overflow: hidden; }do ulgwarantuje, że samo pudełko zostanie odepchnięte na bok przez pływak, zamiast zawartości pudełka.

Tylko IE6 potrzebuje ul { zoom: 1; }w naszych komentarzach warunkowych, aby upewnić się, że ulma układ.

Dodanie ulepszenia do rozwiązania 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/

Wolę tę technikę, ponieważ działa, gdy lista musi opływać pływający obraz, a overflow: hiddentechnika nie. Jednak konieczne jest również dodanie padding-right: 1emdo, liaby zapobiec przepełnieniu pojemnika.

Tutaj pojawia się właściwość „display”. Ustaw CSS poniżej, aby lista działała razem z zawartością pływającą.

wyświetlacz: stół; działa z zawartością pływającą (wypełniając lukę), ale bez ukrywania zawartości za nią. Podobnie jak stół :-)

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

EDYCJA: Pamiętaj, aby dodać klasę, aby wyodrębnić listy, dla których chcesz to zrobić. Np. „Ul.in-content” lub bardziej ogólnie „.content ul”

Wypróbuj list-style-position: inside, aby zmienić układ punktorów.

Pod adresem http://archivist.incutio.com/viewlist/css-discuss/106382 znalazłem sugestię, która w moim przypadku zadziałała: nadaj styl elementom „li”:

position: relative;
left: 1em;

Gdzie zamieniasz „1em” na szerokość lewego dopełnienia / marginesu, jaką miałyby elementy listy, gdyby nie było pływaka. Działa to świetnie w mojej aplikacji, nawet obsługując przypadek, w którym dół pływaka występuje na środku list - punktory przesuwają się z powrotem do (lokalnego) lewego marginesu tuż po prawej stronie.

Dlaczego overflow: hiddendziała

Rozwiązanie jest tak proste, jak:

ul {overflow: hidden;}

Pole bloku z overflow:innym niż visible ustanawia nowy kontekst formatowania bloku dla swojej zawartości. Zalecenie W3C: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Przykład

Przyciski na mojej stronie , które są <li>zamaskowane, są wykonane w ten sposób. Zmniejsz widoczny obszar (okno) przeglądarki, aby zobaczyć wcięcie w akcji .

Powiązane odpowiedzi

• https://stackoverflow.com/a/710264/2192488
• https://stackoverflow.com/a/16041390/2192488

Artykuł z przykładami

• Przepełnienie - tajna korzyść

Dodając przynajmniej dla mnie overflow: auto;swoje ulprace.

Aktualizacja

Zaktualizowałem jsfiddle, aby wizualizować, co się dzieje. Mając ulobok pływającego img, zawartość ulbędzie wypychana przez pływak, ale nie przez rzeczywisty pojemnik. Dodając overflow: autocałe ul-box zostanie wypchnięty przez float zamiast tylko zawartości.

Możesz przypisać position: relative; left: 10px;do li. (Możesz dodatkowo chcieć nadać mu literę margin-right: 10px;, w przeciwnym razie może stać się zbyt szeroki po prawej stronie).

Lub, jeśli chcesz użyć floatdo ul- jak sugerowali inni - prawdopodobnie możesz zatrzymać resztę przed pływaniem na prawo od ul, używając clear: leftna elemencie następującym po ul.

Używam tego do rozwiązania tego problemu:

ul {
   display: table;
}

Zrzeczenie się

Listy obok elementów pływających powodują problemy. Moim zdaniem najlepszym sposobem zapobiegania tego rodzaju pływającym problemom jest unikanie pływających obrazów, które przecinają się z treścią. Pomoże również, gdy będziesz musiał wspierać projektowanie responsywne.

Prosty projekt z wyśrodkowanymi obrazami między akapitami będzie wyglądał bardzo atrakcyjnie i będzie o wiele łatwiejszy w obsłudze niż próba uzyskania zbyt fantazyjnego. Jest też o krok od a <figure>.

Ale naprawdę chcę pływających obrazów!

Ok, więc jeśli jesteś szalona uporczywy wystarczająco, aby kontynuować tę ścieżkę, istnieje kilka technik, które mogą być użyte.

Najprościej jest użyć listy overflow: hiddenlub overflow: scrolltak, aby lista była zasadniczo zawinięta, co powoduje cofnięcie wypełnienia do miejsca, w którym jest przydatne:

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>

Ta technika ma jednak kilka problemów. Jeśli lista stanie się długa, w rzeczywistości nie zawija się wokół obrazu, co w zasadzie podważa cały cel użycia floatna obrazie.

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>

Ale naprawdę chcę zawijać listy!

Ok, więc jeśli jesteś jeszcze bardziej szalony, bardziej wytrwały i absolutnie musisz kontynuować tę ścieżkę, istnieje inna technika, której można użyć do zawijania elementów listy i utrzymywania pocisków.

Zamiast wypełniać <ul>i próbować sprawić, by zachowywał się ładnie z pociskami (czego nigdy nie chce robić), wyjmij te kule <ul>i daj je <li>s. Kule są niebezpieczne, a po <ul>prostu nie są wystarczająco odpowiedzialne, aby właściwie się z nimi obchodzić.

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>

To zachowanie zawijania może robić dziwne rzeczy w złożonej zawartości, więc nie polecam dodawania go domyślnie. O wiele łatwiej jest ustawić go jako coś, na co można się zdecydować, niż coś, co należy zastąpić.

Spróbuj wykonać następujące czynności na swoim znaczniku UL. Powinno to zająć się kulami nakładającymi się na twój obraz i nie musisz zepsuć lewego wyrównania spowodowanego przez list-position: inside.

overflow: hidden; 
padding-left: 2em; 

Sam się z tym zmagałem. Najlepsze, jakie udało mi się osiągnąć, to:

ul {
    list-style-position: inside;
    padding-left: 1em;
    text-indent: -1em;
}

W rzeczywistości tekst nie jest wcięty, ale widać punktor.

Zmieniono w celu aktualizacji na podstawie komentarza OP

ok, a następnie podziel go na 2 zagnieżdżone razem elementy div

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>

spróbuj zmienić ul li css na

ul {float: left; tło: niebieskie; }

Po walce z tym interesującym problemem w kilku projektach i zbadaniu, dlaczego tak się dzieje, w końcu wierzę, że znalazłem zarówno działające, jak i „responsywne” rozwiązanie.

Oto magiczna sztuczka, przykład na żywo: 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 */
}

Pracując w systemie LMS bez dostępu do głównego dokumentu, łatwiej było margin-right: 20pxzastosować styl wbudowany dla obrazu. Co zawdzięczam tej stronie .

Spróbuj tego:

li{
    margin-left:5px;
}

Jeśli chcesz, żeby poszły w lewo, po prostu wpisz wartość - ## px.

lub możesz to zrobić:

 #content ul {
        background:none repeat scroll 0 0 #AACCDD;
        float:left;
        margin-right:10px;
        padding:10px;

a następnie usuń całą stylizację z li

Co powiesz na to?

ul{float:left; clear:right}

width: 300px;
height: 30px;
margin-left: auto;
right: 10px;

margin-left: auto spowoduje wyrównanie elementu do prawej strony. Ustaw wysokość i szerokość żądanego elementu - w moim przypadku jest to obraz tła w div wewnątrz

Możesz również spróbować przesunąć kursor w ullewo i zdefiniować odpowiedni widthdla niego, tak aby unosił się obok obrazu.

Coś takiego jak ten jsfiddle ?

Naprawiłem to z

div.class-name ul {
  clear: both;
}

width: auto; overflow: hidden;

Dodaj display:table; do ul:

ul{display:table;}