简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

How to arrange CSS list horizontally

王林
Release： 2020-11-16 09:29:33
Original
12553 people have browsed it

How to arrange the CSS list horizontally: You can use the [display:inline] attribute to set the [

  • ] tag as an inline element to achieve the horizontal arrangement effect. The display attribute specifies the type of box the element should generate.

    • How to arrange CSS list horizontally

    ##Idea:

    Set the display:inline of the
  • tag, and set
  • as an inline element. Achieve the effect of horizontal arrangement.

    (Recommended tutorial:

    css video tutorial)

    Attribute introduction:

    The display attribute specifies the type of box that the element should generate.

    Specific code: 


    <!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:


    How to arrange CSS list horizontally##Problem:

    li between There is a gap

    Solution:

    Write li in one line

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

    Effect:

    ##Related recommendations:How to arrange CSS list horizontallyCSStutorial

    • The above is the detailed content of How to arrange CSS list horizontally. For more information, please follow other related articles on the PHP Chinese website!

    Related labels：
    css list
    source：php.cn
    Previous article：What should I do if the referenced image in the css file is not displayed? Next article：How to make words equidistantly separated in css
    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
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    1335
    The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
    From 2024-04-06 21:58:04
    0
    1
    800
    Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
    From 2024-04-06 20:57:16
    0
    1
    487
    How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
    From 2024-04-06 20:45:26
    0
    2
    386
    Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
    From 2024-04-06 20:41:51
    0
    1
    518
    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
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！