Home Web Front-end CSS Tutorial Tips to deal with div content overflow_CSS/HTML

Tips to deal with div content overflow_CSS/HTML

May 16, 2016 pm 12:03 PM

tips for dealing with div content overflow_css/html

i encountered a problem a few days ago. the code is at this level:

the code is as follows :

<div class="province">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
Copy after login

i set the border of p.

if you want the content of ul to be within the border,

you must set the height of p.

however, the content in ul changes. when the content is small, it will not be as high as p.

when the height is not set, the content of ul appears outside the border.

it turns out that the border of ul needs to be set. think about it, set the elements closest to him first.

for colleagues who are not very professional in front-end, it is better to have a rule for writing css style sheets:

specify css styles in a hierarchy: as in the above example, define li the style of .province ul li{...}

there is a general order for writing styles: container size (width, height...), container position (left , margin...), container text (color...), others

this avoids problems such as style overrides as much as possible.

the above are some tips for dealing with div content overflow_css/html content. for more related content, please pay attention to the php chinese website (www.php.cn)!


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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Adding Box Shadows to WordPress Blocks and Elements Adding Box Shadows to WordPress Blocks and Elements Mar 09, 2025 pm 12:53 PM

Adding Box Shadows to WordPress Blocks and Elements

Create a JavaScript Contact Form With the Smart Forms Framework Create a JavaScript Contact Form With the Smart Forms Framework Mar 07, 2025 am 11:33 AM

Create a JavaScript Contact Form With the Smart Forms Framework

Working With GraphQL Caching Working With GraphQL Caching Mar 19, 2025 am 09:36 AM

Working With GraphQL Caching

Making Your First Custom Svelte Transition Making Your First Custom Svelte Transition Mar 15, 2025 am 11:08 AM

Making Your First Custom Svelte Transition

Demystifying Screen Readers: Accessible Forms & Best Practices Demystifying Screen Readers: Accessible Forms & Best Practices Mar 08, 2025 am 09:45 AM

Demystifying Screen Readers: Accessible Forms & Best Practices

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts) Comparing the 5 Best PHP Form Builders (And 3 Free Scripts) Mar 04, 2025 am 10:22 AM

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)

Show, Don't Tell Show, Don't Tell Mar 16, 2025 am 11:49 AM

Show, Don't Tell

What the Heck Are npm Commands? What the Heck Are npm Commands? Mar 15, 2025 am 11:36 AM

What the Heck Are npm Commands?

See all articles