How to make ul achieve the effect of horizontal arrangement without line wrapping

Have you ever encountered this situation during page layout? When ul is arranged horizontally, it will wrap to new lines, but this is not the effect we want to see. Do you know how to deal with this situation? This article will talk to you about how to make ul arrange horizontally without wrapping. If you are interested, please read the comments.

I just learned the front-end and tried to write various layouts. Today I want to implement a horizontally arranged photo list, so the first thing that comes to mind is to use ul to set list-style to none. But this only defaults ul to horizontal arrangement, and does not restrict ul from wrapping. When the width set by ul is not enough to accommodate the image, the image will automatically wrap.

So check the information and related layout properties. Eventually two solutions were found.

Option 1:

Set a wide enough width, and then set the float attribute of li to left. This means that the li elements are floated to the left. The code is as follows:

ul {
    width: 2000px; //设置足够的宽度
    overflow: hidden;
    white-space:nowrap; //处理块元素中的空白符和换行符的，这个属性保证图片不换行
}
li{
    list-style: none;
    float: left; //向左排列
    margin-left: 15px;
    width: 130px;
}

Option 2:

ul {
    display: block;
    overflow: hidden;
    white-space:nowrap;//处理块元素中的空白符和换行符的，这个属性保证图片不换行
}
li{
    list-style: none;
    display: inline-block;//使li对象显示为一行
    margin-left: 15px;
    width: 130px;
}

Above we can see that both solutions use the white-space attribute. Without this attribute, it cannot be Complete the effect of no line breaks. You can see from the css manual that this attribute is: how to handle whitespace within elements. When nowrap is selected, the text will not wrap and the text will continue on the same line until the 5347c3d061f1b90e45639e8ac6d3777b tag is encountered. But it can also be used for non-text elements.

There is also the display attribute. In option 2, if it is not set to inline-block, the effect of no line breaks cannot be achieved.

inline-block: Renders the object as an inline object, but the contents of the object are rendered as a block object. Adjacent inline objects will be rendered on the same line, allowing spaces.

Characteristics of inline-block: The object is presented as an inline object, but the content of the object is presented as a block object. Adjacent inline objects will be rendered on the same line, allowing spaces. (To be precise, the element to which this attribute is applied is rendered as an inline object, and surrounding elements remain on the same line, but the width and height properties of the plot element can be set).

This solves the problem of ul being arranged horizontally without wrapping. It seems that it is necessary to be familiar with the characteristics of various attributes.

The above is the detailed content of How to make ul achieve the effect of horizontal arrangement without line wrapping. For more information, please follow other related articles on the PHP Chinese website!