Question

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

CSS

# lib/my_app
defmodule MyApp123 do
  use Application

  # See http://elixir-lang.org/docs/stable/elixir/Application.html
  # for more information on OTP Applications
  def start(_type, _args) do
    import Supervisor.Spec, warn: false

    children = [
      supervisor(MyApp123.Endpoint, []),
      supervisor(MyApp123.Repo, []),
    ]


    # See http://elixir-lang.org/docs/stable/elixir/Supervisor.html
    # for other strategies and supported options
    opts = [strategy: :one_for_one, name: MyApp123.Supervisor]
    Supervisor.start_link(children, opts)
  end

  # Tell Phoenix to update the endpoint configuration
  # whenever the application is updated.
  def config_change(changed, _new, removed) do
    MyApp123.Endpoint.config_change(changed, removed)
    :ok
  end
end

HTML

#s-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 0 auto;
  min-height: 80px;
  padding: 10px 55px;
  z-index: 500;
 }

.main-nav { 
  text-align: right; 
  padding: 25px 0;
}

.main-nav li a {
  display: inline-block; 
  color: #383838;
 }

#copyrite {
 display: inline-block;
}

html输出

<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>

我想将#copyrite放在旁边（右边，vert / horiz对齐）用.main-nav创建的菜单

Answer 1

猜猜你想要什么：

＆＃13;

.nav-right {
  position:relative;
}
.main-nav {
  text-align: right;
  padding: 25px 65px 25px 0;
}
.main-nav li{
  display:inline-block;
}
.main-nav li a {
  display: inline-block;
  color: #383838;
}
#copyrite {
  padding: 25px 0;
  display: inline-block;
  position:absolute;
  right: 0;
  top: 0;
}

＆＃13;

<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">


<header style="margin-top:30px;">
  <nav id="s-nav" class="row">
    <div class="col-sm-4">
      <a href="#" id="s-logo"></a>
    </div>

    <div class="col-sm-8 nav-right">
      
      <!-- php echo start -->
      <ul class="main-nav">
        <li>
          <a href="javascript:;">menu1</a>
        </li>
        <li>
          <a href="javascript:;">menu2</a>
        </li>
        <li>
          <a href="javascript:;">menu3</a>
        </li>
      </ul>
       <!-- php echo start -->
      
      <div id="copyrite">| copy 2016</div>
    </div>
  </nav>
</header>

＆＃13;

==更新1 ==

似乎css的出路有点难。但是，如果获得这样的html输出，响应式css将很容易：

<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>

       <!-- try insert #copyright here -->
       <li>
         <span id="copyright">| copy 2016</span>
       </li>

     </ul>
</div>

尝试通过php方面获取此信息：

我现在没有php运行，这些代码只是一个猜测，希望它有效。

<?php
function add_last_nav_item($items) {
  return $items .= '<li><span id="copyright">| copy 2016<span></li>';
}
add_filter('wp_nav_menu_items','add_last_nav_item');
?>
<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_items( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
     <div id="copyrite">| copy 2016</div>
    </div>
</nav>

对齐未知内容的div

1 个答案: