2012-05-17 74 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