Question

所以我正在搞乱asp.net，我似乎陷入了CSS问题。当我在内联右浮动div时，它按预期工作。但是，当我将此样式移动到外部样式表时，它根本不起作用。
我意识到内联样式具有更高的优先级，并且某些东西可能会阻碍，但我似乎无法弄清楚是什么。

这是我的页面

        <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

    <!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 runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>

***********************the div below that has style="float:right"****************
            <div class="Header"><div style="float:right"><asp:Label ID="lblMasterMessage" runat="server" /></div>Stephen Granets Site!</div>
********************************************************************************

            <div class="ColumnLeft" >
                //stuff
            </div>
                <div class="SiteMap">
                    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
                        <CurrentNodeStyle Font-Bold="True" />
                        <NodeStyle CssClass="ContentLink" Font-Bold="True" />
                        <RootNodeStyle CssClass="ContentLink" Font-Bold="True" />
                    </asp:SiteMapPath>
                </div>
            <div class="ColumnCenter">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>
            </div>
        </div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
        </form>
    </body>
    </html>

这是样式表

    body {
    }
    .Header
    {
        background-color: #6699FF;
        font-family: Verdana;
        font-size: xx-large;
        font-weight: bold;
        color: #FFFFFF;
        padding: 40px 0px 0px 10px;
        width: 100%;
    }
    .ColumnLeft
    {
        padding: 7px;
        background-color: #6699FF;
        float: left;
    }

    a
    {
        color: #000000;
        text-decoration: none;
    }
    a:visited
    {
        color: #000000;
        text-decoration: none;
    }
    a:link
    {
        color: #000000;
        text-decoration: none;
    }
    a:hover
    {
        color: #FFFFFF;
        text-decoration: underline;
    }
    .underline
    {
        text-decoration: underline;
    }
    .ColumnCenter
    {
        margin: 7px 7px 7px 175px;
    }
    a:hover.ContentLink
    {
        color: #000000;
        text-decoration: underline;
    }
    .SiteMap
    {
        font-size: large;
        background-color: #DFEAFF;
    }

当我在外部样式表中使用它时，这是代码

 <div class="test">asp label</div>

我的css表已添加

.test
{
   float:right;
}

问题：那么为什么样式在我将其放入内联时似乎有效，但是当我将那段确切的代码移动到外部样式表时它不起作用？

Answer 1

内联样式是最后应用的样式。使用Firebug或开发人员工具查看当您将其设置为外部时，另一种“更接近”的风格是否会覆盖您的风格（您的风格将被划掉）。

要取代内联样式，请使用!important override：

.test {
    float: right !important;
}

Answer 2

看一下代码的布局，你会在这里进行一些有趣的嵌套，这可能会为循环抛出一些东西。

所以你有这个：

<div class="Header"><div style="float:right"><asp:Label ID="lblMasterMessage" runat="server" /></div>Stephen Granets Site!</div>

当你把它带到外部样式表时，你说你把它切换到了这个：

<div class="test">asp label</div>

所以你有一个Header div，其内部嵌有div，嵌套div的内部。然后关闭嵌套并添加一些随机文本“Stephen Granets Site！”然后关闭Header div。

如果我们采用这种方法会怎样：

<div class="headerWrapper"><div class="Header">Stephen Granets Site!</div><div class="label"><asp:Label ID="lblMasterMessage" runat="server" /></div></div>

这使您能够为CSS设置类似的内容：

.headerWrapper{
background-color: #6699FF;
font-family: Verdana;
font-size: xx-large;
font-weight: bold;
color: #FFFFFF;
padding: 40px 0px 0px 10px;
width: 100%;
margin:0 auto; /* this should center align your containing div */
}

.Header{
font-size:large;
float:left;
width:50%;
}

.label{
float:right; /* If you have your paddings and margins set correctly you could just float this to the left as well */

width:50%;
}

这清楚了吗？您是否尝试将Header div和标签堆叠在一起？这就是我写这篇文章时的假设。

float用作内联样式，但在将其移动到外部样式表时不起作用

2 个答案: