The <marquee> elements are arranged vertically in SAFARI

Question

The site has a ticker, absolutely everywhere elements run into the line, but in SAFARI, or in some other browsers, in particular in the adaptive (when displayed on the phone) - The list of items "rides" in a slender column - This is the problem.

Line code:

<marquee style="height: 17px"> <div class="lenta-rbk"> <div style="direction: ltr; text-align: left ! important"> <table cellpadding="0" cellspacing="0" class="moduletable"> <tbody><tr> <td></td> </tr> <tr> <td> <ul class="newsfeed"> <li> <a href="http://www.rbc.ru/business/11/07/2017/5964d46d9a79474268a5e0ef" target="_blank"> Суд за турбины: как Siemens пытается избежать санкций за поставки в Крым</a> </li> <li> <a href="http://www.rbc.ru/business/11/07/2017/5965166b9a7947e3600c9b29" target="_blank"> «Ростех» получит долю в крупнейшем золотодобытчике России</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/596513899a7947deccc6e130" target="_blank"> Семья основателя «Черкизово» выкупит 21% компании у Prosperity Capital</a> </li> <li> <a href="http://www.rbc.ru/business/11/07/2017/5964ace49a79472faf913d81" target="_blank"> Производители меди в России решили увеличить добычу в надежде на дефицит</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/5964f1209a79474b17576819" target="_blank"> Экс-менеджеры «Башнефти» оспорили решение суда о премиях в компании</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/5964e80b9a794754b5cda4be" target="_blank"> ЦБ выявил признаки инсайдерской торговли акциями «Нижнекамскнефтехима»</a> </li> <li> <a href="http://www.rbc.ru/business/11/07/2017/5964eab39a79477b95435daa" target="_blank"> ФСБ пришла с обысками в офис компании «Т Плюс»</a> </li> <li> <a href="http://www.rbc.ru/business/11/07/2017/5964c8819a794733879aaeae" target="_blank"> Siemens подал в суд из-за поставки его турбин в Крым</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/5964a66a9a7947d3a7376eae" target="_blank"> Германия назвала поставку турбин в Крым «ударом по инвестициям» в Россию</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/5964a5f59a7947cf2989eaf3" target="_blank"> ФАС прекратит принимать жалобы по тендерам на капремонт от физлиц</a> </li> </ul> </td> </tr> </tbody></table> </div> </div> </marquee>

Style code:

 #banner_g2 marquee{position:absolute;bottom:15px;height:17px !important}

Answer 1 · 2017-07-12T13:00:49

It is necessary to set the display of the list with one line:

 li { display: inline-block; }

To work in Chrome and Safari, you need to do this:

 ul { display: flex; } li { display: inline-block; white-space: nowrap; }

See snippet.

 #banner_g2 { width: 320px; position: absolute; bottom: 15px; height: 18px; } ul { margin: 0; padding: 0; display: flex; } li { display: inline-block; margin: 0 15px; white-space: nowrap; }

 <div id="banner_g2"> <marquee> <ul class="newsfeed"> <li> <a href="http://www.rbc.ru/business/11/07/2017/5964d46d9a79474268a5e0ef" target="_blank"> Суд за турбины: как Siemens пытается избежать санкций за поставки в Крым</a> </li> <li> <a href="http://www.rbc.ru/business/11/07/2017/5965166b9a7947e3600c9b29" target="_blank"> «Ростех» получит долю в крупнейшем золотодобытчике России</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/596513899a7947deccc6e130" target="_blank"> Семья основателя «Черкизово» выкупит 21% компании у Prosperity Capital</a> </li> <li> <a href="http://www.rbc.ru/business/11/07/2017/5964ace49a79472faf913d81" target="_blank"> Производители меди в России решили увеличить добычу в надежде на дефицит</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/5964f1209a79474b17576819" target="_blank"> Экс-менеджеры «Башнефти» оспорили решение суда о премиях в компании</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/5964e80b9a794754b5cda4be" target="_blank"> ЦБ выявил признаки инсайдерской торговли акциями «Нижнекамскнефтехима»</a> </li> <li> <a href="http://www.rbc.ru/business/11/07/2017/5964eab39a79477b95435daa" target="_blank"> ФСБ пришла с обысками в офис компании «Т Плюс»</a> </li> <li> <a href="http://www.rbc.ru/business/11/07/2017/5964c8819a794733879aaeae" target="_blank"> Siemens подал в суд из-за поставки его турбин в Крым</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/5964a66a9a7947d3a7376eae" target="_blank"> Германия назвала поставку турбин в Крым «ударом по инвестициям» в Россию</a> </li> <li> <a href="http://www.rbc.ru/rbcfreenews/5964a5f59a7947cf2989eaf3" target="_blank"> ФАС прекратит принимать жалобы по тендерам на капремонт от физлиц</a> </li> </ul> </marquee> </div>

The fact of the matter is that they have an inline-block, I apparently did not show all the styles to you
And according to the rules of the community, you had to create Create a minimal, self-sufficient and reproducible example: ru.stackoverflow.com/help/mcve
You have an error in the styles somewhere outside the example.
I apologize, the links can not be given, showed how he could (

The <marquee> elements are arranged vertically in SAFARI

1 answer 1

More articles: