Question

我有一个HTML页，其中的div包含另一个div，该div包含数据库（聊天系统）中的所有用户，但是ul li标签未采用父div的全部宽度。这是预期结果的图像：http://prntscr.com/nz6byp

我已经尝试将宽度设置为100％。

HTML

tail-(test|test1)

.left-sidebar{ 
    background-color:#F7F7F7; 
    padding: 20px;
    border-radius: 5px 0px 0px 5px;
}


.searchbox{ 
    padding:20px 10px;
    width: 100%;
}

.input-group-btn{
    margin: auto;
}

.search-icon{
    margin: auto;
    font-size: 14px;
    background-size: 250%;
    background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    transition: background 0.5s ease-out;
    color:#fff;
} 

.search-icon:hover{
    background-position: right center;
    color: #fff;  
} 

.form-control:focus{ 
    border:2px solid #fff; 
} 

.chat-left-img,.chat-left-detail{ 
    float: left; 
} 



.left-chat{ 
    overflow-y: scroll;
    width: 100%;
} 


.left-chat::-webkit-scrollbar-track
{
}

.left-chat::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

.left-chat::-webkit-scrollbar-thumb
{
    border-radius: 5px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background-color: #DEDEDE;
}


.left-chat ul{ 
    overflow: hidden; 
    padding: 0px;

} 


.left-chat ul li{ 
    list-style: none; 
    width:100%; 
    float: left; 
    padding: 5px;
    margin: auto;
    background-color: #F2F2F2;
    border-radius: 0px;
    transition: background 0.25s ease-out;
}

.left-chat ul li:hover{ 
    background-color: #E2E2E2
}

.chat-left-img img{ 
    width:50px; 
    height:50px; 
    border-radius: 50%; 
    text-align: left; 
    float:fixed; 
    padding: 3px;
    background: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    background-size: 250%;
} 


.chat-left-details{ 
    width: 100%;
} 

.chat-left-details a{
    margin: 5%; 
    text-decoration: none;
    color: #5D5C5C;
    font-weight: 200;
}

.online{ 
    margin: 5%; 
    color:#86BB71;
    font-size: 14px;
} 

.offline{ 
    margin: 5%; 
    color:#C6C4C4;
    font-size: 14px;
}

感谢您的帮助！

Answer 1

列表元素的宽度设置为容器的100％，但是容器具有填充，这就是为什么您认为它没有填充容器的原因。

.left-sidebar有padding: 20px;，还有.left-chat有overflow-y: scroll。这两个规则使元素比您预期的要小（一些用于父填充，一些用于滚动条宽度）。

您可以为padding: 0 .left-sidebar并为overflow-y: auto设置.left-chat。

您还可以在chrome开发工具上检查元素，以查看发生了什么情况。

您可以在这里看到此：codepen

Answer 2

您的.left-sidebar填充为20px。我删除了左右填充，现在列表变为全宽

.left-sidebar{ 
    background-color:#F7F7F7; 
    padding: 20px;
    border-radius: 5px 0px 0px 5px;
}

.left-sidebar{ 
    background-color:#F7F7F7; 
    padding: 20px 0;
    border-radius: 5px 0 0 5px;
}


.searchbox{ 
    padding:20px 10px;
    width: 100%;
}

.input-group-btn{
    margin: auto;
}

.search-icon{
    margin: auto;
    font-size: 14px;
    background-size: 250%;
    background-image: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    transition: background 0.5s ease-out;
    color:#fff;
} 

.search-icon:hover{
    background-position: right center;
    color: #fff;  
} 

.form-control:focus{ 
    border:2px solid #fff; 
} 

.chat-left-img,.chat-left-detail{ 
    float: left; 
} 



.left-chat{ 
    overflow-y: auto;
    width: 100%;
} 

.left-chat::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

.left-chat::-webkit-scrollbar-thumb
{
    border-radius: 5px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background-color: #DEDEDE;
}

.left-chat ul{ 
    overflow: hidden; 
    padding: 0px;

} 

.left-chat ul li{ 
    list-style: none; 
    width:100%; 
    float: left; 
    padding: 5px;
    background-color: #F2F2F2;
    border-radius: 0px;
    transition: background 0.25s ease-out;
}

.left-chat ul li:hover{ 
    background-color: #E2E2E2
}

.chat-left-img img{ 
    width:50px; 
    height:50px; 
    border-radius: 50%; 
    text-align: left; 
    float:fixed; 
    padding: 3px;
    background: linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
    background-size: 250%;
} 

.chat-left-details{ 
    width: 100%;
} 

.chat-left-details a{
    margin: 5%; 
    text-decoration: none;
    color: #5D5C5C;
    font-weight: 200;
}

<div class="col-md-3 col-sm-3 col-cs-12 left-sidebar">
    <div class="input-group searchbox">
       <div class="input-group-btn">
            <center><a href="find_friends.php"><button id="" class="btn btn-default search-icon" name="search_user" type="submit">Add new user</button></a></center>
       </div>                    
    </div> 
    <div class="left-chat">
       <ul class="full-width-no-padding">
           <li class="full-width-no-padding">
               <div class='chat-left-img'> <img src='$user_profilepic'>
               </div>
               <div class='chat-left-details'>
                   <a href='home.php?user_name=$user_name'>$user_name</a> 
                   <span style='font-size: 12px; color: #5D5C5C;'>(You) 
                   </span><br>
               </div>
          </li>
       </ul>
     </div>

编辑

按照@yaya专业人士的建议，我在overflow-y: auto;类中添加了.left-chat

HTML wrap div全宽

2 个答案: