html - Display menu items horizontally -
i'm trying follow basic html tutorials , not having luck getting menu items display horizontally.
i'm creating asp mvc 4 site out of box, , trying start simple nav tag , display each li horizontally. there literally isn't site yet i'll display total cshtml/css below:
layout.cshtml
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>@viewbag.title - asp.net mvc application</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @styles.render("~/content/css") @scripts.render("~/bundles/modernizr") </head> <body> <div id="content"> <nav> <ul> <li>search</li> <li>create pensgc</li> <li>display excpetions</li> <li>create exception</li> </ul> </nav> @renderbody() </div> </body> </html> css
most of basic, out-of-the-box stuff.
html { background-image: url("/images/swiftnet-background.jpg"); margin: 0; padding: 0; } body { overflow: auto; margin: 0 auto; } #content { position: fixed; top: 30%; left: 40%; margin-top: -50px; margin-left: -100px; height: auto; height: auto; background-color: white; border: 1px solid #999; border-radius: 5px 10px / 10px; -webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); -moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75); } #body { clear: both; padding-bottom: 35px; } /* menu */ nav { margin-bottom: 5px; } ul li { display: inline; } ul#menu { margin: 0; padding: 0; text-align: center; } ul#menu li { margin: 0; padding: 0; }
ok, why don't user this?
<nav> <span>search</span> <span>create exception</span> </nav> html css asp.net-mvc asp.net-mvc-4
No comments:
Post a Comment