Значение Flexbox "nowrap" не работает
Это часть моего кода, которая не работает:
.copyright {
display: flex;
flex-wrap: nowrap;
/* This is not working */
color: red;
}<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Sample</p>
<span>
<li class = "fa-stack">
<i class = "fa fa-square fa-stack-2x" style = "color:#3b5998"></i>
<i class = "fa fa-facebook fa-stack-1x fa-inverse"></i>
</li>
<li class = "fa-stack">
<i class = "fa fa-square fa-stack-2x" style = "color:#00aced"></i>
<i class = "fa fa-twitter fa-stack-1x fa-inverse"></i>
</li>
</span>
<br><br>
<p class = "copyright">
<span>I want this left from icons</span>
<span>
<li class = "fa-stack">
<i class = "fa fa-square fa-stack-2x" style = "color:#3b5998"></i>
<i class = "fa fa-facebook fa-stack-1x fa-inverse"></i>
</li>
<li class = "fa-stack">
<i class = "fa fa-square fa-stack-2x" style = "color:#00aced"></i>
<i class = "fa fa-twitter fa-stack-1x fa-inverse"></i>
</li>
</span>
</p>Вы знаете, почему flexwrap: nowrap; не работает? Мои значки расположены ниже диапазона, а не справа.
Этот html-код имеет несколько проблем. Хотя большинство браузеров допускают плохой HTML-код, невозможно узнать, как они его интерпретируют. В этом случае <li> ... </li> оказывается за пределами из <p class = "copyright"> в понимании Firefox (он просто закрыл <p>, когда увидел <li>. Некоторые из проблем : <li> не может находиться в пределах <p> и не может быть в пределах <span>. Вокруг <li> должно быть <ul> или <ol>. Всегда лучше запускать код через HTML-валидатор до того, как решит, что он «не работает» или не попытается отладить его.
Ответы 5
Мне просто нужно было обновить <p class = "copyright"> на <div class = "copyright">
Или я мог бы использовать display:block для p.copyright
Просто дайте свой класс авторских прав display: inline-block;
Просто нужна общая оболочка, такая как div и display flex
div {
display: flex;
}<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Sample</p>
<span>
<li class = "fa-stack">
<i class = "fa fa-square fa-stack-2x" style = "color:#3b5998"></i>
<i class = "fa fa-facebook fa-stack-1x fa-inverse"></i>
</li>
<li class = "fa-stack">
<i class = "fa fa-square fa-stack-2x" style = "color:#00aced"></i>
<i class = "fa fa-twitter fa-stack-1x fa-inverse"></i>
</li>
</span>
<br><br>
<p class = "copyright">
<div>
<span>I want this left from icons</span>
<span>
<li class = "fa-stack">
<i class = "fa fa-square fa-stack-2x" style = "color:#3b5998"></i>
<i class = "fa fa-facebook fa-stack-1x fa-inverse"></i>
</li>
<li class = "fa-stack">
<i class = "fa fa-square fa-stack-2x" style = "color:#00aced"></i>
<i class = "fa fa-twitter fa-stack-1x fa-inverse"></i>
</li>
</span>
</div>
</p>Это не работает, потому что flex-wrap: nowrap применяется к гибким элементам, а не к тексту внутри элемента. Вам нужно настроить таргетинг на текст с помощью white-space: nowrap.
.copyright {
display:flex;
flex-wrap: nowrap; /* will prevent flex items on the same line from wrapping */
white-space: nowrap; /* will prevent text from wrapping */
}
какие элементы или значки вы хотите видеть в строке и по порядку, затем поместите их в элемент div, который имеет гибкость. и вам не нужно свойство flex-wrap, как при правильном порядке html, просто свойство display: flex позаботится о большинстве вещей
Смотрите здесь https://jsfiddle.net/b6vw9t2y/38/<div style='display: flex'>
<i>icon1></i>
<i>icon2</i>
<i>icon3</i>
</div>
выход: icon1 icon2 icon3
пройдите по ссылке ниже для ознакомления с основами flexbox, это понятно, и это, безусловно, значительно облегчит вашу жизнь, когда вы получите контроль над flexbox.
Эта HTML-структура - безумие