Question

编辑：此处的Plunker预览 - http://embed.plnkr.co/2afyRrde2rxncxPelB69/preview

可能是一个可怕的头衔，但过了一分钟我就无法想出更好的了。

我创建了一个带有angularjs和一些html的简单页面。我遇到的问题实际上是css。当你点击一个菜单项时，它会突出显示该块，但是我得到了一个奇怪的1-2 px边框，它没有在底部突出显示。

已经好几个小时了，并且认真地走上墙......

我的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link type="text/css" rel="stylesheet" href="css.css" />

<!--AngularJS code-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>

<body>


<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
    <!-- The navigation menu will get the value of the "active" variable as a class.
         The $event.preventDefault() stops the page from jumping when a link is clicked. -->
    <div id="header">
        <div id="title">
            <h3 class="pull-left company-heading">Tool Title</h3>
        </div>
        <nav class="pull-right {{active}}" ng-click="$event.preventDefault()">

            <!-- When a link in the menu is clicked, we set the active variable -->

            <a href="#" class="home" ng-click="active='home'">Home</a>
            <a href="#" class="projects" ng-click="active='projects'">Projects</a>
            <a href="#" class="services" ng-click="active='services'">Services</a>
            <a href="#" class="contact" ng-click="active='contact'">Contact</a>
        </nav>
    </div>
    <!-- ng-show will show an element if the value in the quotes is truthful,
         while ng-hide does the opposite. Because the active variable is not set
         initially, this will cause the first paragraph to be visible. -->

    <p ng-hide="active">Please click a menu item</p>
    <p ng-show="active">You chose <b>{{active}}</b></p>
</div>
fd
</body>

</html>

我的css：

*{
    margin:0;
    padding:0;
}

body{
    font:15px/1.3 'Open Sans', sans-serif;
    color: #5e5b64;
}

#header {
    position: relative;
    background: none repeat scroll 0% 0% #185A82;
    margin-bottom:45px;
    line-height: normal;    
}

#title {
    display:inline-block;
    padding: 18px 200px;
    color:#fff;
    font-weight:bold;
    font-size:18px;

}

a, a:visited {
    outline:none;
    color:#389dc1;
}

a:hover{
    text-decoration:none;
}

section, footer, header, aside, nav{
    display: block;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}


/*-------------------------
    The menu
--------------------------*/

nav{
    display:inline-block;
    border-radius:2px;

}

nav a{
    color:#fff;
    text-transform: uppercase;
    display:inline-block;
    padding: 18px 30px;
    text-decoration:none !important;
    -webkit-transition:background-color 0.25s;
    -moz-transition:background-color 0.25s;
    transition:background-color 0.25s;
}

nav a:first-child{
    border-radius:2px 0 0 2px;
}

nav a:last-child{
    border-radius:0 2px 2px 0;
}

nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
    background-color:#e35885;
}

p{
    font-size:22px;
    font-weight:bold;
    color:#7d9098;
}

p b{
    color:#ffffff;
    display:inline-block;
    padding:5px 10px;
    background-color:#c4d7e0;
    border-radius:2px;
    text-transform:uppercase;
    font-size:18px;
}

Answer 1

您可以尝试在标签上添加以下css

line-height: 60px;/*height of your header*/
padding: 0px 30px;/*remove the top and bottom padding*/

希望它会帮助你

Answer 2

使用以下命令更新以下css值：

nav a{
  color:#fff;
  text-transform: uppercase;
  display:inline-block;
  padding: 22px 30px;
  text-decoration:none !important;
  -webkit-transition:background-color 0.25s;
  -moz-transition:background-color 0.25s;
  transition:background-color 0.25s;
}

Answer 3

您的标题填充是问题

这将有效：

#title {
  display: inline-block;
  padding: 14px 200px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}

Answer 4

使用以下内容更新nav > a的css样式：

nav a {
    color: #fff;
    display: inline-block;
    padding: 23px 30px 19px;
    text-decoration: none !important;
    text-transform: uppercase;
    -webkit-transition: background-color 0.25s;
    -moz-transition: background-color 0.25s;
    transition: background-color 0.25s; 
}

否则，您可以将自定义高度设置为a。

Answer 5

尝试使用填充来调整元素的大小可能很棘手。在这种情况下，尺寸最好由元素的内容决定。我建议进行以下更改：

首先删除#tittle的填充，然后添加所需的定位。

#title {
    display:inline-block;
    position: relative;
    top: 18px;
    left: 200px;
    color:#fff;
    font-weight:bold;
    font-size:18px;
}

对于#header的高度匹配子元素的高度，我们必须包含样式为clear: both的元素。这是因为#nav具有float: right并且浮点算法将从正常流中提取框。（参考：Visual formatting model）

HTML：

  <div id="header">
    <div id="title">...</div>
    <nav class="pull-right {{active}}" ng-click="$event.preventDefault()">...</nav>
    <div class="clear"></div>
    ...
  </div>

CSS：

.clear {
  clear: both;
}

最后，我们在正常流程中不需要的#header中包含的元素包含在样式为float: left的div中。

我更新了你的例子： http://embed.plnkr.co/ekxYOXLp4UUZD7ikHMHM/preview

我希望这会有所帮助。

Answer 6

使用浮动时，需要添加“清除”样式以清除浮动：

<br style="clear:both" />

这是因为浮动的div内部的任何内容都不占用div内的空间。 clear float CSS指示DIV确保它包含浮动的子节点。

例如：

  <div id="header">
    <div id="title">
      <h3 class="pull-left company-heading">Tool Title</h3>
    </div>
    <nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
      <!-- When a link in the menu is clicked, we set the active variable -->
      <a href="#" class="home" ng-click="active='home'">Home</a>
      <a href="#" class="projects" ng-click="active='projects'">Projects</a>
      <a href="#" class="services" ng-click="active='services'">Services</a>
      <a href="#" class="contact" ng-click="active='contact'">Contact</a>
    </nav>
    <br style="clear:both" />
  </div>

您还必须删除标题的margin-bottom CSS样式。

#header {
    position: relative;
    background: none repeat scroll 0% 0% #185A82;

    line-height: normal;    
}

Demo Plunker

Answer 7

将导航a的填充更改为

nav a {
    padding: 21.5px 30px;
}

为什么将div着色为全高？

7 个答案: