无法在响应式CSS设计上定位链接？

Question

我有一个响应式网站，我无法在不影响现有导航的情况下定位......

我在wordpress网站上有以下代码......

http://alanbrandt.com

客户端HTML

<!-- wrapper -->
<div class="wrapper">
    <!--[if lt IE 8]>
        <p class="chromeframe">Your browser is <em>ancient!</em>  <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
    <![endif]-->
    <!-- header -->
    <header id="header-main">
        <!-- logo --> <a id="rel-top"></a>

        <div id="logo"> <a href="http://alanbrandt.com">
                            <!-- svg logo - toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script -->
                            <h1 id="logo"><img src="http://alanbrandt.com/wp-content/themes/alanbrandt/images/logo.svg" alt="Alan Brandt Photography"></h1>
                        </a>

        </div>
        <!-- /logo -->
        <!-- nav -->
        <nav id="nav-main" role="navigation">
            <ul>
                <li id="menu-item-161" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-161"><a class="expandStories top" href="http://alanbrandt.com/stories">Stories</a>
                </li>
                <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://alanbrandt.com/about-me/">About me</a>
                </li>
                <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://alanbrandt.com/portfolio/">Portfolio</a>
                </li>
                <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://alanbrandt.com/prices/">Prices</a>
                </li>
                <li id="menu-item-16" class="ContactMenu menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://alanbrandt.com/contact/">Contact</a>
                </li>
                <li class='last'>
                    <form role='search' method='get' id='searchform' action='http://alanbrandt.com' class=''>
                        <fieldset>
                            <input type='text' value='' name='s' id='s' placeholder='Search' />
                            <input type='submit' id='searchsubmit' value='Search' />
                        </fieldset>
                    </form>
                </li>
            </ul>
            <div class='cf'></div>
            <div id="language"> <a href="http://alanbrandt.dk">Dansk</a> | <a href="http://alanbrandt.com">English</a>

            </div>
        </nav>

如果我使用下面的CSS来对齐Dansk | English链接，则用户不再能够点击导航链接???

CSS

.language {
  position:relative;
  left:340px;
  top:-27px;
}

有人可以说明应该如何做到这一点。我不是开发人员所以请提供详细信息...... :)

提前致谢...：）

Answer 1

用户无法单击导航链接，因为您尚未设置语言div的宽度（默认为100％），并且您使用负值将语言div移动到导航块顶部。

我的解决方案如下：

CSS：

  .wrapper {
   margin: 0 auto;      /* Center your contents */
   max-width: 780px;    /* Set the maximum width for your wrapper! */ 
   width: 100%;
   }

  #language {
   position: relative;
   top: -27px;
   float: right;        /* You're floating the div to the right */
   width: 100px;        /* Now you've set the width on the language div */
   }

这只是解决问题的一种方法。如果您需要进一步的帮助，请告诉我。