Html 对齐未知内容的div

尝试将两个文本div与未确定的内容对齐。使用Bootstrap框架和Wordpress

css

html

|2016年副本

html输出

<div class="col-sm-4">logo . . . </div>

<div class="col-sm-8">
  <div class="main-nav">
     <ul id="menu-primary" class="menu">
       <li id="menu-item-364" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-364">
       <a href="http://localhost/wordpress">HOME</a>
       </li>
     </ul>
</div>

<div id="copyrite">| copy 2016</div>

</div>

logo。




|2016年副本

我希望#copyrite位于使用.main nav创建的菜单旁边（右侧，垂直/水平对齐）

猜猜你想要什么：

.nav右键{
位置：相对位置；
}
.主导航{
文本对齐：右对齐；
填充：25px 65px 25px 0；
}
主导航李先生{
显示：内联块；
}
.主导航李a{
显示：内联块；
颜色：#383838；
}
#山寨{
填充：25px0；
显示：内联块；
位置：绝对位置；
右：0；
排名：0；
}

|2016年副本

显示没有php的最终html，让我们知道真正的结构，plz.my apologies，updated question代码片段是我想要的，但似乎无法让它工作me@user3550879，注意你的代码

使用id和

。版权所有

上课。祝你好运，我在代码中有正确的答案，但在问题中复制了错误的答案#copyrite位于菜单的顶部，我的解决方案是：make

#copyrite

parent node

position:relative

，然后它是同级

。main nav

在右侧填充了更多内容。main nav{padding:25px 65px 25px 0}，注意65px只是一个猜测，应该比

版权

宽度大。最后，通过上面的css代码将

#版权

置于绝对位置。添加

padding:25px 0

使其垂直对齐。哦，这样它就不会在旁边浮动，它会占用旁边的空间

<nav id="s-nav" class="row">
     <div class="col-sm-4"> <a href="<?php echo get_home_url(); ?>" id="s-logo"></a></div>

    <div class="col-sm-8">
     <?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
     <div id="copyrite">| copy 2016</div>
    </div>
</nav>

<div class="col-sm-4">logo . . . </div>

<div class="col-sm-8">
  <div class="main-nav">
     <ul id="menu-primary" class="menu">
       <li id="menu-item-364" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-364">
       <a href="http://localhost/wordpress">HOME</a>
       </li>
     </ul>
</div>

<div id="copyrite">| copy 2016</div>

</div>