将按钮扩展到div的长度

时间：2015-09-05 14:27:25

标签： html css

我正在尝试使用CSS扩展一个按钮来覆盖我的右侧div的整个长度。任何helpLinkCol div。它没有发生。我在网上搜索过，但没有找到能帮到我的结果。任何帮助表示赞赏。

 body{
    background-color: ;
    }
.mainMenuRow{
    display: table;
    width:100%;
    position: relative;
    }
.iconMenuCol{
    display: table-cell;
    width: 85%;
    background-color: lightblue;
    }
.helpLinkCol{
    display: table-cell;
    background-color: lightgrey;
    text-align:left;
    text-indent:2.55em;
    }
.icon_Menu li a{
    text-decoration: none;
    }
.icon_Menu li a:visited{
    text-decoration: none;
    }
.icon_Menu li a img {
    vertical-align: middle;
    padding: 0 0 0 0;
    width: 80px;
    height: 80px;
  }
.icon_Menu li {
    font-size: 2em;
    padding:1em 0em 0.5em .5em;
    margin-bottom:0.2em;
    text-indent:0em;
    list-style: none;
    font-weight: bold;
    text-decoration: none;
    }
.icon_Menu li a span {
    padding: 0 0 0 4em;
  }
.helpfulLinks li{
    list-style: none;
    font-size: 1.2em;
    font-weight: ;
    margin: 0;
    }
.helpfulLinks li a{
    text-decoration: none;
        }
.helpfulLinks .but_nav span {
    display: block;
    min-width:100%;
    padding: 10px 20px;
    background: #4479BA;
    color: #FFF;
    margin: 0 0px;
    border: 1px solid lightgrey;

    }
.helpfulLinks{
    padding-left: 0px;
    width: 242px;
    margin: 0
    }
.helpfulLinks .but_nav :hover{
    color: lightblue;
    }

这是HTML 

    <!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>

 <div class="mainMenuRow">
            <div class="iconMenuCol">
                <ul class="icon_Menu">
                    <li><a href="#" target="_self" title="Directory Listing -Search and Notify Recipients or Groups">
                        <IMG SRC="home.png"><span>Directory Search for Recipients or Groups</span></a>
                    </li>

                    <li><a href="#" target="_self" title="Schedule Listing - Oncall Notification/Escalation">
                          <IMG SRC="home.png" border="0" width="64" height="64"><span>Oncall Schedule Listing</span></a>
                    </li>

                    <li><a href="#" target="_self" title="MIR3 Search Reports">
                            <IMG SRC="home.png" border="0" width="64" height="64"><span>Search Reports</span></a>       
                    </li>

                    <li><a href="#">
                         <IMG SRC="home.png" border="0" width="64" height="64"><span>Windows Server Update Schedules</span></a>
                    </li>

                    <li><a href="#" target="_self" title="Oracle Databases">
                         <IMG SRC="home.png" border="0" width="64" height="64"><span>Database Listing<span></a>
                    </li>

                    <li><a href="#" target="_self" title="MQ Series Alert Listing">
                         <IMG SRC="home.png" border="0" width="64" height="64"><span>MQ Series Listing<span></a>
                    </li>

                    <li><a href="#" target="_self" title="Paging Vendors and Codes">
                        <IMG SRC="home.png" border="0" width="64" height="64"><span>Carrier List</span></a>
                    </li>
                </ul>
            </div>

            <div class="helpLinkCol">

                <ul class="helpfulLinks" >
                    <li class="subHeader_nav">
                        <strong>Helpful Links</strong>
                    <li class="but_nav">
                        <a class="helpLink" href="#"><span>Tech Service Desk</span></a>
                    </li>   
                    <li class="but_nav">
                        <a class="helpLink" href="#><span>Tech OneStop</span></a>
                    </li>   
                    <li class="but_nav">
                        <a class="helpLink" href="#"><span>Tech Web</span></a>
                    </li>
                    <li class="but_nav">
                        <a class="helpLink" href="#"><span>Tech Profile</span></a>
                    </li>
                    <li class="but_nav">
                        <a class="helpLink" href="#"><span>Help</span></a>
                    </li>
                </ul>

            </div>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

你有这种风格：

.helpfulLinks .but_nav span{
    min-width: 100%;
    padding: 10px 20px;
}

box-sizing的默认值为content-box，因此您的div的宽度为100％+ 40px（来自填充）

你在这里设置一个固定的宽度：

.helpfulLinks {
    width: 242px;
}

要解决此问题，请添加样式box-sizing: border-box;并将固定的width更改为min-width

像这样：

*{
    box-sizing: border-box;
}
body {
    background-color: #fff;
}
.mainMenuRow {
    display: table;
    width:100%;
    position: relative;
}
.iconMenuCol {
    display: table-cell;
    width: 85%;
    background-color: lightblue;
}
.helpLinkCol {
    display: table-cell;
    background-color: lightgrey;
    text-align:left;
    text-indent:2.55em;
}
.icon_Menu li a {
    text-decoration: none;
}
.icon_Menu li a:visited {
    text-decoration: none;
}
.icon_Menu li a img {
    vertical-align: middle;
    padding: 0 0 0 0;
    width: 80px;
    height: 80px;
}
.icon_Menu li {
    font-size: 2em;
    padding:1em 0em 0.5em .5em;
    margin-bottom:0.2em;
    text-indent:0em;
    list-style: none;
    font-weight: bold;
    text-decoration: none;
}
.icon_Menu li a span {
    padding: 0 0 0 4em;
}
.helpfulLinks li {
    list-style: none;
    font-size: 1.2em;
    font-weight:;
    margin: 0;
}
.helpfulLinks li a {
    text-decoration: none;
    display: block;
}
.helpfulLinks .but_nav span {
    display: block;
    min-width:100%;
    padding: 10px 20px;
    background: #4479BA;
    color: #FFF;
    margin: 0 0px;
    border: 1px solid lightgrey;
}
.helpfulLinks {
    padding-left: 0px;
    min-width: 242px;
    margin: 0
}
.helpfulLinks .but_nav :hover {
    color: lightblue;
}
<div class="mainMenuRow">
    <div class="iconMenuCol">
        <ul class="icon_Menu">
            <li><a href="#" target="_self" title="Directory Listing -Search and Notify Recipients or Groups">
                        <IMG SRC="home.png"><span>Directory Search for Recipients or Groups</span></a>

            </li>
            <li><a href="#" target="_self" title="Schedule Listing - Oncall Notification/Escalation">
                          <IMG SRC="home.png" border="0" width="64" height="64"><span>Oncall Schedule Listing</span></a>

            </li>
            <li><a href="#" target="_self" title="MIR3 Search Reports">
                            <IMG SRC="home.png" border="0" width="64" height="64"><span>Search Reports</span></a> 
            </li>
            <li><a href="#">
                         <IMG SRC="home.png" border="0" width="64" height="64"><span>Windows Server Update Schedules</span></a>

            </li>
            <li><a href="#" target="_self" title="Oracle Databases">
                         <IMG SRC="home.png" border="0" width="64" height="64"><span>Database Listing<span></a>

            </li>
            <li><a href="#" target="_self" title="MQ Series Alert Listing">
                         <IMG SRC="home.png" border="0" width="64" height="64"><span>MQ Series Listing<span></a>

            </li>
            <li><a href="#" target="_self" title="Paging Vendors and Codes">
                        <IMG SRC="home.png" border="0" width="64" height="64"><span>Carrier List</span></a>

            </li>
        </ul>
    </div>
    <div class="helpLinkCol">
        <ul class="helpfulLinks">
            <li class="subHeader_nav"> <strong>Helpful Links</strong>

                <li class="but_nav"> <a class="helpLink" href="#"><span>Tech Service Desk</span></a>

                </li>
                <li class="but_nav">
                    <a class="helpLink" href="#><span>Tech OneStop</span></a>
                    </li>   
                    <li class=" but_nav ">
                        <a class="helpLink " href="# "><span>Tech Web</span></a>
                    </li>
                    <li class="but_nav ">
                        <a class="helpLink " href="# "><span>Tech Profile</span></a>
                    </li>
                    <li class="but_nav ">
                        <a class="helpLink " href="# "><span>Help</span></a>
                    </li>
                </ul>

            </div>
</div>

现在您的helpLinkCol已自动调整，因为display: table-cell，如果您希望它的宽度始终为242像素，请将宽度从.helpfulLinks移至.helpLinkCol，将table-layout: fixed设置为.mainMenuRow，如下所示：

*{
    box-sizing: border-box;
}
body {
    background-color: #fff;
}
.mainMenuRow {
    display: table;
    width:100%;
    position: relative;
    table-layout: fixed;   /*added*/
}
.iconMenuCol {
    display: table-cell;
    width: 85%;
    background-color: lightblue;
}
.helpLinkCol {
    display: table-cell;
    background-color: lightgrey;
    text-align:left;
    text-indent:2.55em;
    width: 242px;        /*added*/
}
.icon_Menu li a {
    text-decoration: none;
}
.icon_Menu li a:visited {
    text-decoration: none;
}
.icon_Menu li a img {
    vertical-align: middle;
    padding: 0 0 0 0;
    width: 80px;
    height: 80px;
}
.icon_Menu li {
    font-size: 2em;
    padding:1em 0em 0.5em .5em;
    margin-bottom:0.2em;
    text-indent:0em;
    list-style: none;
    font-weight: bold;
    text-decoration: none;
}
.icon_Menu li a span {
    padding: 0 0 0 4em;
}
.helpfulLinks li {
    list-style: none;
    font-size: 1.2em;
    font-weight:;
    margin: 0;
}
.helpfulLinks li a {
    text-decoration: none;
    display: block;
}
.helpfulLinks .but_nav span {
    display: block;
    min-width:100%;
    padding: 10px 20px;
    background: #4479BA;
    color: #FFF;
    margin: 0 0px;
    border: 1px solid lightgrey;
}
.helpfulLinks {
    padding-left: 0px;    
    margin: 0
}
.helpfulLinks .but_nav :hover {
    color: lightblue;
}
<div class="mainMenuRow">
    <div class="iconMenuCol">
        <ul class="icon_Menu">
            <li><a href="#" target="_self" title="Directory Listing -Search and Notify Recipients or Groups">
                        <IMG SRC="home.png"><span>Directory Search for Recipients or Groups</span></a>

            </li>
            <li><a href="#" target="_self" title="Schedule Listing - Oncall Notification/Escalation">
                          <IMG SRC="home.png" border="0" width="64" height="64"><span>Oncall Schedule Listing</span></a>

            </li>
            <li><a href="#" target="_self" title="MIR3 Search Reports">
                            <IMG SRC="home.png" border="0" width="64" height="64"><span>Search Reports</span></a> 
            </li>
            <li><a href="#">
                         <IMG SRC="home.png" border="0" width="64" height="64"><span>Windows Server Update Schedules</span></a>

            </li>
            <li><a href="#" target="_self" title="Oracle Databases">
                         <IMG SRC="home.png" border="0" width="64" height="64"><span>Database Listing<span></a>

            </li>
            <li><a href="#" target="_self" title="MQ Series Alert Listing">
                         <IMG SRC="home.png" border="0" width="64" height="64"><span>MQ Series Listing<span></a>

            </li>
            <li><a href="#" target="_self" title="Paging Vendors and Codes">
                        <IMG SRC="home.png" border="0" width="64" height="64"><span>Carrier List</span></a>

            </li>
        </ul>
    </div>
    <div class="helpLinkCol">
        <ul class="helpfulLinks">
            <li class="subHeader_nav"> <strong>Helpful Links</strong>

                <li class="but_nav"> <a class="helpLink" href="#"><span>Tech Service Desk</span></a>

                </li>
                <li class="but_nav">
                    <a class="helpLink" href="#><span>Tech OneStop</span></a>
                    </li>   
                    <li class=" but_nav ">
                        <a class="helpLink " href="# "><span>Tech Web</span></a>
                    </li>
                    <li class="but_nav ">
                        <a class="helpLink " href="# "><span>Tech Profile</span></a>
                    </li>
                    <li class="but_nav ">
                        <a class="helpLink " href="# "><span>Help</span></a>
                    </li>
                </ul>

            </div>
</div>

相关问题
最新问题