Home > Developer > Web Develop
At first I want to set a navigation bar, width is full of the entire screen, each sub-navigation width is the same, the width of the navigation bar, the following (for the sake of sharing, I gave each child navigation deliberately add a background color):
Then I began to write the HTML code, very simple, as follows:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>Inline-block</title>6 </Head>7 <Body>8 <ulclass= "Main-nav">9 <Li><ahref="#">Home</a></Li>Ten <Li><ahref="#">Pros</a></Li> One <Li><ahref="#">News</a></Li> A <Li><ahref="#">Jobs</a></Li> - </ul> - </Body> the </HTML>
Then start setting up the CSS code:
1 Body{margin:0 Auto;}2 . Main-nav{width:100%;font-size:20px;Height:30px;Line-height:30px;text-align: Center; Background-image:linear-gradient (Black, #ccc, black);
margin:0;padding:0;}3 . Main-nav Li{Display:Inline-block;List-style:None;Height:100%;width:25%;}
It turns out that the results are as follows:
Li each occupies 25% of the width, should not be like that tile a whole line? See the gap between Li, I thought it was margin or padding, and so on, I put the LI element of the margin and padding are set to 0, found that no eggs.
Then a variety of information, only learned:HTML line breaks, spaces, tabs and other white space, the font size is not 0, the space character occupies a certain width, the use of Inline-block will produce the gap between elements; You can use word-spacing to set a negative value to resolve, But the gap will change as the font size changes, and when the font size changes, the value of the word-spacing is reset, or the float method is easier to use. for my question, put the. Main-nav setting {word-spacing:-10px;} or . Main-nav li settings {float:left;} It's settled.
For more in-depth understanding of Inline-block, refer to the home of the script, "take you into the deep analysis of Inline-block attribute value of the past life"
Self-study CSS hit the "Pit" (1): Inline-block gap
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
