Question

我正在尝试对齐标题中的项目，但似乎无法按照我想要的方式对齐它们。我已尝试使用float:right;等，但无法让它们按照我在此图片中的方式对齐：

这是我的小提琴：http://jsfiddle.net/Legion87/g8LLxz7h/

<div class="header">
    <div class="wrap">
        <div class="header-left">
            <div class="logo">
                <a href="index.html">Home</a>
            </div>
        </div>
        <div class="header-right">
            <div class="top-nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="design.html">Design</a></li>
                    <li><a href="store.html">Store</a></li>
                </ul>
            </div>
        </div>
        <div class="sign-ligin-btns">
            <ul>
                <li id="signupContainer"><a class="signup" id="signupButton" href="#"><span><i>Signup</i></span></a>
                <!-- Login Ends Here -->
                </li>
                <li id="loginContainer"><a class="login" id="loginButton" href="#"><span><i>Login</i></span></a>
                ...

Answer 1

＆＃13;

body {
    background:#fff;
    font-family:'arial';
}
/*---start-wrap-----*/
 .wrap {
    width:100%;
    margin:0 auto;
    font-size: 14px;
}
#page {
    display:none;
}
/*---start-header----*/
#header {
    padding: 0.3em 0 0em;
    border-bottom: 50px solid #fff;
    background-color: #fff;
}
.header-left {
    float: left;
    margin-top: -20px;
    margin-bottom: 50px;
    margin-right: 50px;
}
.logo a {
    color: #E95393;
    font-family:'arial';
    font-size: 35px;
}
.header-right {
    float:left;
    width: 50%;
    margin-left: 100px;
}
.top-nav {
    text-align:center;
}
.top-nav ul li {
    border-right: 1px solid #E95393;
    display:inline-block;
}
.top-nav ul li a {
    color: #43C5E6;
    padding: 1.8em 0.8em;
    display: block;
    font-size: 14px;
    margin-right: 10px;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
}
.top-nav ul li a:hover {
    color:#E95393;
}
.top-nav {
    float:left;
}
#sign-ligin-btns {
    margin-left:25%;;
    margin-right:65%:
    vertical-align: top;
    margin-top: 30px;
}
#sign-ligin-btns ul li {
    display:inline-block;
}
#sign-ligin-btns ul li a.signup span, #sign-ligin-btns ul li a.login span {
    padding: 0.5em 1.8em 0.55em 1.8em;
    display: block;
    font-size: 1em;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    border-radius: 0.15em;
    -webkit-border-radius: 0.15em;
    -moz-border-radius: 0.15em;
    -o-border-radius: 0.15em;
}
#sign-ligin-btns ul li a.signup {
    color:#000;
}
#sign-ligin-btns ul li a.signup:hover {
    background: #43C5E6;
}
#sign-ligin-btns ul li a.login {
    color:#000;
}
#sign-ligin-btns ul li a.login:hover {
    background: #43C5E6;
}
/*---End-header----*/

＆＃13;

<div id="sign-ligin-btns">
  <ul>
    <li id="signupContainer"><a class="signup" id="signupButton" href="#"><span><i>Signup</i></span></a>

      <!-- Login Ends Here -->
    </li>
    <li id="loginContainer"><a class="login" id="loginButton" href="#"><span><i>Login</i></span></a>

    </li>
  </ul>
</div>
<div id="header">
  <div class="wrap">
    <div class="header-left">
      <div class="logo">	<a href="index.html">Home</a>

      </div>
    </div>
    <div class="header-right">
      <div class="top-nav">
        <ul>
          <li><a href="index.html">Home</a>

          </li>
          <li><a href="about.html">About</a>

          </li>
          <li><a href="design.html">Design</a>

          </li>
          <li><a href="store.html">Store</a>

          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我不打算详细说明，但我应该如何解决它：

创建一个容器div，将overflow: hidden css属性设置为它。
在那个容器中还有另外两个div，左边的div表示30％宽对了60％。
左侧div向左浮动，右侧向右浮动
左边的div是徽标
右边的div还有两个div：一个用于用户相关的链接，和一个主菜单
这两个菜单都是无序列表
每个列表项（li）都有CSS属性display: inline-block 或只是inline。

到现在为止你应该真正接近你想要达到的目标，你也可能已经存在。您可以使用最少的代码执行此操作。

无法在标题中对齐项目

2 个答案: