2012-05-17 53 views
0

我不能用CSS更改div的高度。它似乎没有影响。下面的代码。我使用Javascipt和CSS编写C#ASP.NET。下面的代码包含在使用SSI的其他文件中。无论height:50px的值如何,.navdiv的高度都不会改变。无法更改div的高度。

ASPX

<link rel="Stylesheet" href="CSS/SSI/header.css" /> 
<div id="header"> 
    <div id="logo"> 
     <img id="imglogo" src="Images/logo.gif" /> 
    </div> 
    <div id="nav"> 
     <a class="navlink" href="default.aspx"> 
      <div class="navdiv" id="navhome"> 
       Home 
      </div> 
     </a> 
     <a class="navlink" href="import.aspx"> 
      <div class="navdiv" id="navimport"> 
       Import 
      </div> 
     </a> 
    </div> 
</div> 

CSS

/* 
* header.css 
* Created By: Steven T. Norris Created On: 5/12/2012 
* Update By: Update On: 
* 
* Stylesheet for header SSI 
*/ 

/*Main header style*/ 
#header 
{ 

    background-color:#2875ff; 
    border-color:Black; 
    border-style:solid; 
    border-width:2px; 
    padding:0px; 
    margin:0px; 
} 
#logo 
{ 
    margin-bottom:10px; 
} 

#navhome 
{ 
    height:100px; 
} 

/*Navigation styles*/ 
.navdiv 
{ 
    height:50px; 
    background-color:#000999; 
    display:inline; 
    margin-left:10px; 
    padding-right:5px; 
    padding-left:5px; 
    font-size:large; 
    text-align:center; 
    color:#c24900; 
    font-weight:bold; 
    text-decoration:none; 
} 
.navdiv:hover 
{ 
    color:White; 
} 
#nav 
{ 
    padding:0px; 
    margin:0px; 
    height:auto; 
    width:100%; 
} 

回答

1

使用display: inline-block;可以解决高度问题,但是如果您想让div保持并排,请务必将float: left;添加到这两个元素。

1

height属性都不会有问题上display: inline元素。它必须是blockinline-block

+0

然后在我的情况下delima变成:我如何让div坐在另一个旁边,能够通过CSS更改高度,并且只填充其内容的宽度? – steventnorris

+0

'display:inline-block;' –

+0

这是'inline-block'上的一个很好的[文章](http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/) – albin