Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > Web Front-end > HTML Tutorial > [CSS Tips] Another way to arrange the list horizontally_html/css_WEB-ITnose

[CSS Tips] Another way to arrange the list horizontally_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:56:04
Original
2037 people have browsed it

Lists

    etc. are arranged vertically by default. When we need it to be arranged horizontally, we usually use float to achieve it, but using float usually causes some typesetting problems. Today I learned another method:
    Set the display:inline of the
  • tag, and set
  • as an inline element to achieve the effect of horizontal arrangement without using float. 

    <!doctype html><html><head><meta charset="utf-8"><title>列表横向排列的另一种方法</title><style type="text/css">ul li{display:inline;background:#F93; padding:5px;}}</style></head><body><ul>    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul></body></html>
    Copy after login

    Effect:

    Wait, why is there a gap between the li's? ? ?

    The solution is: write li in one line 

    <ul>    <li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li></ul>
    Copy after login

    Yes, it is written like this (I don’t know if it is a bug)

    This method has a drawback: after li is converted to an inline element, width and height are invalid, and padding can only be used to expand the width and height. There are also some inconveniences. Make your own choice based on your needs.

Related labels：
【CSS技巧】列表横向排列的另一种方法
source：php.cn
Previous article：CSS font_html/css_WEB-ITnose Next article：Codeforces Round #274 (Div. 2) C Exams_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2533
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2675
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2263
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
2132
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
2238
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template