Question

我试图使我的导航栏看起来与此网站上的导航栏类似。（http://thestyleinsider.weebly.com/）我有两个问题。即使我在css中使用了"text-align: centre-right;"，我也无法将链接置于中心（右侧）。我还想知道如何将链接带到导航栏的中间（这样他们就不会停留在网页的顶部）。我试过调整padding但没有任何作用。非常感谢任何帮助！

http://codepen.io/anon/pen/PPxdyN

Answer 1

为什么要尝试对齐文字？这正是flexbox的发明之处。

nav {
    display: flex;
}

nav a:first-child {
    margin-left: auto;
}

查看此working codepen example。

将display：flex应用于导航容器会更改其子项的行为并将其转换为弹性项目。这反过来changes the behaviour of margin-left。现在将第一个导航子项的margin-left设置为auto，可以确保Flex项目左侧的整个空间都已填充，并将它们全部移到右侧。

<强>更新

我已更新我的回答，同时考虑到您想要显示在左侧。通过使用flexbox，您可以将徽标作为最后一个子项添加到导航容器中，仍然可以使用:first-child。通过更改最后一个子项（包含徽标并具有.logo类）的顺序，您可以将其切换到第一个位置。但是，这不会使:first-child成为margin-left，因此无法应用nav { display: flex; } nav a { order: 2; } nav a.logo { order: 1; } nav a:first-child { margin-left: auto; }。

margin-right

查看此updated codepen example

更新2

作为Henri Vonfire points out，您还可以将徽标用作第一个孩子，并使用nav { display: flex; } nav a:first-child { margin-right: auto; }让flex填充第一个和第二个Flex项目之间的空间。这样就可以完全放弃订单的变化。

Fatal Exception: android.view.ViewRootImpl$CalledFromWrongThreadException: Only the original thread that created a view hierarchy can touch its views.
       at android.view.ViewRootImpl.checkThread(ViewRootImpl.java:7406)
       at android.view.ViewRootImpl.invalidateChildInParent(ViewRootImpl.java:1113)
       at android.view.ViewGroup.invalidateChild(ViewGroup.java:4595)
       at android.view.View.invalidate(View.java:11301)
       at android.view.View.invalidate(View.java:11250)
       at android.widget.TextView.updateAfterEdit(TextView.java:7817)
       at android.widget.Editor.finishBatchEdit(Editor.java:1330)
       at android.widget.Editor.endBatchEdit(Editor.java:1313)
       at android.widget.TextView.endBatchEdit(TextView.java:6084)
       at com.android.internal.widget.EditableInputConnection.endBatchEdit(EditableInputConnection.java:82)
       at android.view.inputmethod.BaseInputConnection.finishComposingText(BaseInputConnection.java:292)
       at com.android.internal.widget.EditableInputConnection.finishComposingText(EditableInputConnection.java:199)
       at android.view.inputmethod.InputMethodManager.checkFocusNoStartInput(InputMethodManager.java:1448)
       at android.view.inputmethod.InputMethodManager.onWindowFocus(InputMethodManager.java:1500)
       at android.view.ViewRootImpl$ViewRootHandler.handleMessage(ViewRootImpl.java:4211)
       at android.os.Handler.dispatchMessage(Handler.java:110)
       at android.os.Looper.loop(Looper.java:193)
       at android.os.HandlerThread.run(HandlerThread.java:61)

查看此last codepen example

Answer 2

一个可能的答案就是这个。将文本设置为与右侧对齐，并将行高度设置为足以到达导航栏的中间位置。

nav {
  line-height:80px;
  text-align: right;
}

Answer 3

据我所知，text-align不适用于多个属性。这就是我要做的。

1）从主导航班上取下高度。

3）设置text-align：right，并给它一些填充。这个填充给主导航它的高度并垂直居中链接。

 .directive('customTag', function($compile, $parse) {
 
   return {
     scope: {
       type: "="
     },
     require: '^ngModel',
     restrict: 'E',
     replace: true,
     link: function($scope, el, attr, ngModel) {

       var input = angular.element('<input/>');
           input.attr('ng-model', 'what/s here is going to be???')

       var linkFn = $compile(input);
       var content = linkFn($scope);
       el.replaceWith(content);

     }
   }
 })

.main {position: relative;}
    .main-nav {
      background-color: black;
      z-index: 150;
      text-align:right;
      padding:20px;
      position: fixed;
      width: 100%;
      top:0;}
    .main-nav-scrolled {
      position: fixed;
      width: 100%;
      top: 0;
      background: yellow;}
    a:link, a:visited {
      width: 100%;
      text-align: center-left;
      padding: 8px;
      text-decoration: none;
      text-transform: uppercase;
      height: 80px;
      border-bottom: 18px;
      border-top: 18px;}
a {
  color: white;
  text-decoration: none;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
a:hover {
  background-color: #ffbc00;
}
a img {
  border: 0;
}
ol,
ul {
  list-style-type: none;
}

使导航栏居中

3 个答案: