CSS Positioning Inside Navigation Bar

问题

I am learning how to make a responsive website following a tutorial here -- this is my demo project) but I am having a problem: I cannot position anything to the right of the <ul> inside the <nav>. For some reason everything (including the #pull link when the display is not set to "none") falls below the <nav> and the <ul>. I want to make a login form somewhere to the right of the <ul> in the <nav> and I cannot for the life of me figure out how to do it at all.

Im sure its just a basic CSS positioning issue that I can't figure out because I am new to this, but I just need to place more content on the <nav> and I cannot figure out how to.

回答1:

The widht's limit it's the problem: see the class nav ul has width: 600px; you need rework the width size for nav ul in all stylesheet.

Example: https://www.dropbox.com/s/itz8j1aeyyyufbh/Screenshot%202014-01-02%2020.10.07.png

nav ul {
  height: 40px;
  margin: 0 auto;
  padding: 0;
  width: 700px;
}

回答2:

You need to change the display property, for default is block on ul elements, with that property you can't position elements right aside. Try this:

nav ul, nav > a#pull {
  display:inline-block;
  vertical-align:middle;
}

And to keep the horizontal align this:

nav {
  text-align:center;
}

回答3:

Everything falls below the title because your ul has an automatic margin on the sides. If you wanted to put your pull link on the right and you do not mind using absolute positioning you could do something like this:

#pull {
 position: absolute;
 top: 0;
 right: 0;
}

来源：https://stackoverflow.com/questions/20889805/css-positioning-inside-navigation-bar

标签

css3

css-position