How do I position buttons so they align horizontally with another element?

问题

I need some help with my styling. I'm trying to get a nice looking website, but I just can't seem to do it. I've tried floats, but to no avail. I want to to have the look of the 'Aspen Development' as the brand name, and then have my buttons on the right side of the div. Here's my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aspen Development | Home</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    </head>

    <body> 
    <div id="container">
      <div id="navMenu">
        <div id="header">
                <div id="brand"><a href="index.html">Aspen Development</a></div>
                <ul>
                  <li class="navButton">Home</li>
                  <li class="navButton">Pricing</li>
                  <li class="navButton">Contact Us</li>
                </ul>
        </div>
      </div>
      <div id="content">
        <div id="contentContainer">
        <p><b>4.21.14</b> Welcome to Aspen Development.</p>
        <p><b>4.19.14</b> The website has been created!</p>
        </div>
      </div>
      <div id="footer">
        <center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">Copyright &copy; 2014 Aspen Development | All Rights Reserved</p></center>
      </div>
    </div>
    </body>
</html>

My CSS:

@charset "utf-8";

body, h1, h2, h3, h4, h5, h6, p, div {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFF;
}

#navMenu, #footer {
    width: 100%;
    height: 50px;
    background-color: #F8F8F8;
    border: 2px solid #E6E6E6;
}

#header {
    width: 1140px;
    height: 50px;
    margin: 0 auto;
    text-align: right;
}

#brand a {
    display: block;
    width: 175px;
    padding-top: 12px;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-right: 14px;
    color: black;
    font-size: 1.25em;
    text-align: justify;
    text-decoration: none;
}

.navButton {
    display: block;
    width: 175px;
    padding-top: 12px;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-right: 14px;
    color: black;
    font-size: 0.75em;
    text-align: justify;
    list-style: none;
}

#content {
    width: 100%;
}

#contentContainer {
    width: 1140px;
    margin: 0 auto;
}

#contentContainer p {
    margin: 20px;
}

Thanks in advance. :)

回答1:

Add this CSS classes :

ul{
    float:right;    
}

#brand {
    float:left;
}

Add to .navButton:

display: inline-block;

And add to #header :

overflow:hidden;

Also replace :

width: 1140px;

with

min-width: 1140px;
width: 100%;

in #navMenu, #footer and #header.

Check Fiddle

回答2:

why don't you easily use float: left and float: right as long as you have given height to your header.

#brand{
    float: left;
}

.navButton {
    float: right;
}

回答3:

Its an easy problem. You messed up the css bad. Here is the link and to the changed css and HTML.

Hope it helps... i have updated the css using element id try not to do that, always use classes for css unless you have a really good reason not to.

回答4:

I've created a fiddle to help you fix the issue.

Use float: left in .navButton class and add clearfix class to the ul containing the .navButton elements. the style definition for the clearfix class is also written in the fiddle. Please try and let us know.

来源：https://stackoverflow.com/questions/23178672/how-do-i-position-buttons-so-they-align-horizontally-with-another-element

标签

html

css

alignment

positioning