html - 将按钮扩展到 div 的长度

标签 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>

最佳答案

你有这样的风格:

.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，如果您希望它始终具有 242px 的宽度，请将宽度从 .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>

关于html - 将按钮扩展到 div 的长度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32414174/

上一篇：html - Firefox 在第二页打印 colspan 边框

下一篇：javascript - html评论破坏网站

相关文章：

javascript - 对话框在视口(viewport)外打开

javascript - 无法通过 JavaScript 检查复选框

html - 最大宽度和自动换行 : break-word causing text to be aligned to the left

css - 造型 WordPress 循环问题

javascript - 如果可滚动的 div 比窗口高，则将水平滚动条附加到窗口底部

javascript - 如果多于 x 个字符则屏蔽

php - 添加简单的基于 jquery 的查看/隐藏更多操作到 ckeditor 中编写的 html 数据

html - 对齐彼此下方的文本链接

css - node.js - 当参数 express.js 太长时无法加载 css

css - 在 SASS 中评估像素的百分比

©2024 IT工具网  联系我们