Menu horizontal how i make <div> same width as <ul>, warp the content exactly

HTML & CSS
1

in case i have <div><ul><li>… menu horizontal how i make <div> same width as <ul>, warp the content exactly so as when div margin:0 auto; , the menu goes in the center exactly…?

2

Hi, Welcome to Sitepoint :slight_smile:

The question needs a little clarification but it seems like you want a centred widthless horizontal menu?

The easiest way to do that would be by using display:inline-block and then text-align:center on a parent would center them all.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.nav { text-align:center; }
.nav ul {
	margin:0;
	padding:0;
	list-style:none;
	background:red;
	color:#fff;
}
.nav ul,
.nav li, 
.nav a {
	display:inline-block;
	vertical-align:top;
*display:inline;/* for ie6 and 7 support of inline-block - remove if not required */
	zoom:1.0;	/* for ie6 and 7 support - remove if not required */
}
.nav a{
	color:#fff;
	text-decoration:none;
	padding:5px 10px;
	margin:0 10px;	
}
.nav a:hover{background:orange}
</style>
</head>

<body>
<div class="nav">
		<ul>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
		</ul>
</div>
</body>
</html>
3

is a horizontal menu mine, why you do not used float:left in your code above?

4

Because you wanted a centred menu which can’t be done easily with “widthless” floats.

Display:inline-block allows inline and block elements to take on width and height properties as if they were block elements but still allow then to stay in the same line much as a floated element would but without actually floating.

It all depends on the desired outcome as to which is the best method to use.

5

float:left; // so remove this

and use your methods correct?

6

Hi,

Yes my example does not need a float anywhere in the mix. Just copy my html in post#2 and play around with it to see if it suits your purposes.

Without seeing your exact structure and the effect you want I can only make a best guess at what you need. If you have a link or html and css of what you have got then we may be able to give more specific advice.

7

solved but only in Live view shows … is any way seem layout good and in design view … i use dw cs6(dreamweaver)…?

8

Here’s a tip for you :slight_smile:

“Don’t use Design View in Dreamweaver!”

It’s about as useful as a chocolate fire-guard and seldom displays any but the simplest of CSS correctly. On the other hand the code editor in DW is very good and you should work solely in code view and then view your work in a number of browsers every few steps of the way (never just check in one browser).

I load the page in about 4 browsers and then when I update the code I just click refresh in each browser to see the result instantly. Don’t use f12 in DW either as that creates a temporary file to view and can’t be trusted either.