【问题标题】:Cannot change height of div.无法更改 div 的高度。
【发布时间】:2012-05-17 17:05:19
【问题描述】:

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

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%;
}

【问题讨论】:

    标签: asp.net css html height ssi


    【解决方案1】:

    使用display: inline-block; 将解决高度问题,但如果您希望 div 仍然并排,请务必将float: left; 添加到两个元素。

    【讨论】:

      【解决方案2】:

      对于带有display: inline 的元素,height 属性无关紧要。必须是blockinline-block

      【讨论】:

      • 那么在我的情况下,delima 变成:如何让 div 彼此相邻,能够通过 CSS 更改高度,并且只填充其内容的宽度??
      • 这是一个很好的article inline-block
      • @ChaseFlorell 使用 inline-block 会导致 div 不并排并且填充为 100%(使用 ie7)
      • 在我链接的article 中有一些关于如何使其在旧浏览器中工作的提示。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-03-20
      • 2014-03-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-11-29
      • 2014-11-23
      相关资源
      最近更新 更多