Newbie asking for help, making DIV CSS navigation bar! _html/css

Newbie asking for help, making DIV CSS navigation bar! _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:25:36

Original

1787 people have browsed it

Hello everyone, I am making another navigation bar and encounter the following problems

The web navigation of the target website is like this:

After I layout it using DIV CSS , the style is like this. From the picture below, you can see that the text spacing of the navigation is obviously much larger than that of the target website.

If you adjust the width smaller but still can’t fit it, as shown in the picture

The following is the HTML part

    <div class="maindiv">    	<div class="head">                <div class="menu">                  	<ul>                    	<li>home</li>                        <li>SPECIALS</li>                        <li>ALL PRODUCTS</li>                        <li>CONTACT US</li>                        <li>ABOUT</li>                        <li>BACK TO TUTORIAL</li>                    </ul>                </div>            <div></div>            <div></div>        </div>    </div></body>

Copy after login

Below is the CSS part

body{ background:url(../images/body-bg.jpg) fixed}.maindiv{ width:1000px;			height:1200px;			margin:0 auto}.head{ width:1000px;		height:210px;		margin:25px auto 0px}		.menu{ width:1000px;		height:30px;		background:#060;		color:#FFF;		text-align:left}		.menu ul { width:1000px;			height:30px;}			.menu ul li{font-size:11px;		line-height:35px;		text-transform:uppercase;		text-align:left;		width:100px;		font-weight:bolder;		float:left;		list-style:none;}

Copy after login

Please tell me how to make the navigation bar look like the target website. Please give me some advice. Thank you very much! ! ! !

Reply to discussion (solution)

    .maindiv {				width: 1000px;				height: 1200px;				margin: 0 auto			}			.head {				width: 1000px;				height: 210px;				margin: 25px auto 0px			}			.menu {				width: 1000px;				height: 30px;				background: #060;				color: #FFF;				text-align: left			}			.menu ul {				width: 1000px;				/*height: 30px;*/				padding-left:0;				overflow:hidden;			}			.menu ul li {				font-size: 11px;				line-height: 30px;				text-transform: uppercase;				text-align: left;				/*width: 100px;*/				font-weight: bolder;				float: left;				list-style: none;			}			.menu ul li a{				text-decoration:none;				color:#ffffff;				padding: 10px 15px;			}			.homeSpecail{				padding-left:0;				background-color:#333333;			}

Copy after login

    <body>		<div class="maindiv">			<div class="head">				<div class="menu">					<ul>						<li class="homeSpecail">							<a href="#">home</a>						</li>						<li>							<a href="#">SPECIALS</a>						</li>						<li>							<a href="#">ALL PRODUCTS</a>						</li>						<li>							<a href="#">CONTACT US</a>						</li>						<li>							<a href="#">ABOUT</a>						</li>						<li>							<a href="#">BACK TO TUTORIAL</a>						</li>					</ul>				</div>				<div></div>				<div></div>			</div>		</div>	</body>

Copy after login

The "options" in the navigation here are generally links, so you can wrap the navigation "options" with a tags in HTML, and then control the spacing between the "options" through the padding of the a tags.
I am also a novice, let’s discuss and learn together, haha.

You should be able to see from the target image that

The width of the menu is not equal
The spacing of the menu is the same

Then it proves that the width is auto to let the content support it
spacing? Both padding and margin can be set, but padding will not overlap and margin will overlap
From the picture above, it can be seen that padding should be used because the spacing on the left is smaller than the spacing inside and seems to be half the size

    .maindiv {				width: 1000px;				height: 1200px;				margin: 0 auto			}			.head {				width: 1000px;				height: 210px;				margin: 25px auto 0px			}			.menu {				width: 1000px;				height: 30px;				background: #060;				color: #FFF;				text-align: left			}			.menu ul {				width: 1000px;				/*height: 30px;*/				padding-left:0;				overflow:hidden;			}			.menu ul li {				font-size: 11px;				line-height: 30px;				text-transform: uppercase;				text-align: left;				/*width: 100px;*/				font-weight: bolder;				float: left;				list-style: none;			}			.menu ul li a{				text-decoration:none;				color:#ffffff;				padding: 10px 15px;			}			.homeSpecail{				padding-left:0;				background-color:#333333;			}

Copy after login

    <body>		<div class="maindiv">			<div class="head">				<div class="menu">					<ul>						<li class="homeSpecail">							<a href="#">home</a>						</li>						<li>							<a href="#">SPECIALS</a>						</li>						<li>							<a href="#">ALL PRODUCTS</a>						</li>						<li>							<a href="#">CONTACT US</a>						</li>						<li>							<a href="#">ABOUT</a>						</li>						<li>							<a href="#">BACK TO TUTORIAL</a>						</li>					</ul>				</div>				<div></div>				<div></div>			</div>		</div>	</body>

Copy after login

The "options" in the navigation here are generally links, so you can wrap the navigation "options" with a tag in html , and then control the spacing between "options" through the padding of the a tag.
I am also a newbie, let’s discuss and learn together, haha.

Thank you very much to the guy upstairs, the problem has been solved, thank you very much

Well, you’re welcome...

letter-spacing