html <li>如何横向排列 怎么将ul下的li标签横着排列,要设置那个属性?

html\u4e2d\u600e\u6837\u8ba9\u591a\u4e2ali\u6807\u7b7e\u6a2a\u6392\u663e\u793a

\u7ed9\u4f60html\u91cc\u9762ul\u91cc\u9762\u7684li\u8bbe\u7f6e\u6d6e\u52a8\uff0c\u5982\u4e0b\uff1a
ul li{
float:left;
}

\u628aul\u5305\u542b\u7684li\u5b9a\u4e49\u4e3a\u4e00\u4e2a\u7c7b\uff0c\u5728css\u6837\u5f0f\u7528\u7c7b\u9009\u62e9\u5668\u8bbe\u7f6eli\u7684float\u5c5e\u6027\u4e3a\u5411\u5de6\u6d6e\u52a8\uff0c
\u5373\u4e3afloat\uff1aleft\uff1b
\u6700\u597d\u5c06\u65e0\u5e8f\u5217\u8868\u524d\u9762\u7684\u70b9\u53bb\u6389\u3002\u5373ul\u7684list-style-type\uff1anone\uff1b\u8fd9\u6837\u8bbe\u8ba1\u51fa\u6765\u7684\u6bd4\u8f83\u7f8e\u89c2\u3002

\u6269\u5c55\u8d44\u6599\uff1a

CSS \u5217\u8868\u5c5e\u6027(list)

1.list-style \u7b80\u5199\u5c5e\u6027\u3002\u7528\u4e8e\u628a\u6240\u6709\u7528\u4e8e\u5217\u8868\u7684\u5c5e\u6027\u8bbe\u7f6e\u4e8e\u4e00\u4e2a\u58f0\u660e\u4e2d\u3002
2.list-style-image \u5c06\u56fe\u8c61\u8bbe\u7f6e\u4e3a\u5217\u8868\u9879\u6807\u5fd7\u3002
3.list-style-position \u8bbe\u7f6e\u5217\u8868\u4e2d\u5217\u8868\u9879\u6807\u5fd7\u7684\u4f4d\u7f6e\u3002
4.list-style-type \u8bbe\u7f6e\u5217\u8868\u9879\u6807\u5fd7\u7684\u7c7b\u578b\u3002

很多回答都是设置float属性来排列,其实可以从属性之外的方面设置。鉴于li元素是块状元素,所以元素与元素之间才会换行,现在只要把li元素变成元素之间可以同行的内联块状元素就行了。具体代码如下:
li{
display:inline-block;
}

用float:left,可以横向排列
用css 设置ul{list-style:none;}去掉li前边的东西

扩展阅读:高清线hdmi ... mac蜜桃奶茶314 ... www.apple.com ... matebook14 ... 韩国macbookpro ... java入门网站 ... www.sony.com.cn ... 国产任天堂switch手柄 ... bowers&wilkins官网 ...

本站交流只代表网友个人观点,与本站立场无关
欢迎反馈与建议,请联系电邮
2024© 车视网