How to use <li> in a div class?

<head>
    <title>Furture Name</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
	<header>
    	<div class="wrap_top_bar">
        	<nav>
            	<ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">User Name</a></li>
                    <li><a href="#">Sign Out</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>

my css:

body {
background-color: #F1F1F1;
}

.wrap_top_bar {
margin: -8px;
height: 50px;
background-color: white;
}

.warp_top_bar ul{
margin-right: 50px;
margin-left: 50px;
list-style: none;

}
.wrap_top_bar li{
display: inline;
margin-left: 20px;
float: right;
}
.wrap_top_bar a{
color: #777777;
text-decoration: none;
font-family: Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace;
}
.wrap_top_bar a:hover{
color: black;
text-decoration: underline;
}

It only read let float right but did’t read display and margin-left

<head>
    <title>Furture Name</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
	<header>
    	<div id="warp">
        	<nav>
            	<ul>
  				<li><a href="#">Home</a></li>
  				<li><a href="#">User Name</a></li>
                    <li><a href="#">Sign Out</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>
 body {
 	background-color: #F1F1F1;
 }
 #warp {
 	margin: -16px;
 	height: 50px;
 	background-color: white;
 }
 #warp ul{
 	margin-right: 50px;
 	margin-left: 50px;
 	list-style: none;
 	float: right;	
 }
 #warp ul li{
 	display: inline;
 	margin-left: 20px;
 	
 }
 #warp a{
 	color: #777777;
 	text-decoration: none;
 	font-family: Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace;
 }
 #warp a:hover{
 	color: black;
 	text-decoration: underline;
 }

if i like this ,
the website can work what i want
but i don’t know how to use Class for css/html

watch the naming of your class. Sometimes you’re referring to it as warp and sometimes as wrap.

2 Likes

@kennyko3167

In your original post changing #warp_top_bar to #wrap_top_bar cures most problems except the following:

http://jigsaw.w3.org/css-validator/validator

Family names containing whitespace should be quoted.

If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.

Edit:
Spot the difference :slight_smile:

font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
2 Likes

I am so careless.:banghead:
thank two guys help a lot.haha :winky:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.