How to make ul arrange horizontally without line wrapping?
This article mainly shows you "how to make ul horizontal arrangement without wrapping effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve the effect of horizontal arrangement of ul without wrapping lines" this article.
Option 1:
Set the width wide enough, and then set the float property of li to left. It means to float li elements to the left. The code is as follows:
Ul {
Width:2000px;// sets enough width
Overflow:hidden
White-space:nowrap;// handles white space and newline characters in block elements, which ensures that the picture does not wrap
}
Li {
List-style:none
Float:left;// arranged to the left
Margin-left:15px
Width:130px
}
Option 2:
Ul {
Display:block
Overflow:hidden
White-space:nowrap;// handles white space and newline characters in block elements, which ensures that the picture does not wrap
}
Li {
List-style:none
Display:inline-block;// makes the li object appear as a row
Margin-left:15px
Width:130px
}
Above we can see that both solutions use the white-space attribute, without which you cannot achieve the effect of not wrapping lines. You can see from the css manual that this attribute is: how to handle white space within an element. When you select nowrap, the text will not wrap, and the text will continue on the same line until you encounter the
Until the label. But it can also be used for non-text elements.
And then there is the display attribute. In scenario 2, if it is not set to inline-block, the effect of no line wrapping cannot be achieved.
Inline-block: the object is rendered as an inline object, but the contents of the object are rendered as block objects. The inline object next to it is rendered on the same line, allowing spaces.
The characteristic of inline-block: the object is rendered as an inline object, but the contents of the object are rendered as block objects. The inline object next to it is rendered on the same line, allowing spaces. (to be exact, the elements that apply this property are rendered as inline objects, and the surrounding elements remain in the same row, but you can set the attributes of the width and height parcel elements.)
The above is all the content of this article "how to make ul arrange horizontally without line wrapping". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
