伸展 <li> 背景填充寬度 <ul>

Question

嗨，我無法弄清楚如何拉伸li背景以填充其父ul的寬度。 因此，偶數消息中的淺綠色矩形不會覆蓋整個區域。 我需要水色矩形的尺寸與淺藍色矩形的尺寸相同。

這是我的應用程序的圖片，請注意缺少由紅色橢圓形表示的接頭，它們不是正確的顏色：

這是EJS（將其處理為html）代碼的相關部分：

 html, body { height: 100%; background-color: #E5E5E5; } #nav-bar { margin-bottom: 0; } #messages { list-style-type: none; margin: 0; padding: 0; width: 100%; } #messages li { padding: 5px 10px; width: 100%; } #messages li:nth-child(even) { background: #88e9e1; } #online-users { list-style-type: none; padding-left: 0; } #online-users li:nth-child(odd) { color: #373737; } #online-users li:nth-child(even) { color: #777777; } #container { height: 100%; } #middle-div { border-radius: 3px; border: 1px solid #202020; } #chat-column { height: 65vh; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: 1px solid #202020; /* Keep messages from overflowing out of rectangle */ word-wrap: break-word; /* Contain messages as a scrollable list inside the rectangle */ overflow-y: auto; } #users-column { height: 65vh; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #202020; /* Keep usernames from overflowing out of rectangle */ word-wrap: break-word; /* Contain usernames as a scrollable list inside the rectangle */ overflow-y: auto; } #bottom-div { margin-top: 15px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container" id="container"> <div class="row" id="top-div"> <!-- The users username --> <h3 class="text-primary">Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1> </div> <div class="row" id="middle-div"> <div class="form-group" id="chat-and-users"> <div> <div class="col-xs-9 bg-info" id="chat-column"> <!-- Chat Column --> <ul id="messages"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> <div class="col-xs-3 bg-success" id="users-column"> <!-- Users Column --> <h4><b>Online Users:</b></h4> <ul id="online-users"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> </div> </div> </div> <div class="row" id="bottom-div"> <form action="" id="input-button-form"> <div class="form-group"> <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message..."> </div> <button type="submit" id="button-send" class="btn btn-primary">Submit</button> </form> </div> </div> 

筆記：

1. 消息來自前端文件，並作為li附加到id為“ messages”的ul中。

2. 以下鏈接沒有幫助，因此請不要引用它： 拉伸列表項目<li>以填充<ul>的寬度

Answer 1

嘗試這個。 我after CSS before和after添加了：

#messages li{
    position:relative;
}
#messages li:nth-child(2n):before {
    content: "";
    width: 15px;
    left: -15px;
    top: 0;
    bottom: 0;
    height: 100%;
    background: #88e9e1;
    position: absolute;
}
#messages li:nth-child(2n):after{
    content: "";
    width: 15px;
    right: -15px;
    top: 0;
    bottom: 0;
    height: 100%;
    background: #88e9e1;
    position: absolute;
}

 html, body { height: 100%; background-color: #E5E5E5; } #nav-bar { margin-bottom: 0; } #messages { list-style-type: none; margin: 0; padding: 0; width: 100%; } #messages li { padding: 5px 10px; width: 100%; position: relative; } #messages li:nth-child(even) { background: #88e9e1; } #messages li:nth-child(2n)::before { content: ""; width: 15px; left: -15px; top: 0; bottom: 0; height: 100%; background: #88e9e1; position: absolute; } #messages li:nth-child(2n)::after { content: ""; width: 15px; right: -15px; top: 0; bottom: 0; height: 100%; background: #88e9e1; position: absolute; } #online-users { list-style-type: none; padding-left: 0; } #online-users li:nth-child(odd) { color: #373737; } #online-users li:nth-child(even) { color: #777777; } #container { height: 100%; } #middle-div { border-radius: 3px; border: 1px solid #202020; } #chat-column { height: 65vh; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: 1px solid #202020; /* Keep messages from overflowing out of rectangle */ word-wrap: break-word; /* Contain messages as a scrollable list inside the rectangle */ overflow-y: auto; } #users-column { height: 65vh; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #202020; /* Keep usernames from overflowing out of rectangle */ word-wrap: break-word; /* Contain usernames as a scrollable list inside the rectangle */ overflow-y: auto; } #bottom-div { margin-top: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container" id="container"> <div class="row" id="top-div"> <!-- The users username --> <h3 class="text-primary">Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h3> </div> <div class="row" id="middle-div"> <div class="form-group" id="chat-and-users"> <div> <div class="col-xs-9 bg-info" id="chat-column"> <!-- Chat Column --> <ul id="messages"> <!-- Messages go here --> <li>demo test</li> <li>demo test demo test</li> <li>demo test</li> <li>demo test demo test</li> </ul> </div> <div class="col-xs-3 bg-success" id="users-column"> <!-- Users Column --> <h4><b>Online Users:</b></h4> <ul id="online-users"> <!-- Online users go here --> </ul> </div> </div> </div> </div> <div class="row" id="bottom-div"> <form action="" id="input-button-form"> <div class="form-group"> <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message..."> </div> <button type="submit" id="button-send" class="btn btn-primary">Submit</button> </form> </div> </div> 

Answer 2

問題是col-xs-9它給您padding-right: 15px;padding-left: 15px; 。 最簡單的答案是給#chat #chat-column {padding:0;}

 html, body { height: 100%; background-color: #E5E5E5; } #nav-bar { margin-bottom: 0; } #messages { list-style-type: none; margin: 0; padding: 0; width: 100%; } #messages li { padding: 5px 10px; width: 100%; } #messages li:nth-child(even) { background: #88e9e1; } #online-users { list-style-type: none; padding-left: 0; } #online-users li:nth-child(odd) { color: #373737; } #online-users li:nth-child(even) { color: #777777; } #container { height: 100%; } #middle-div { border-radius: 3px; border: 1px solid #202020; } #chat-column { padding:0; height: 65vh; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: 1px solid #202020; /* Keep messages from overflowing out of rectangle */ word-wrap: break-word; /* Contain messages as a scrollable list inside the rectangle */ overflow-y: auto; } #users-column { height: 65vh; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #202020; /* Keep usernames from overflowing out of rectangle */ word-wrap: break-word; /* Contain usernames as a scrollable list inside the rectangle */ overflow-y: auto; } #bottom-div { margin-top: 15px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container" id="container"> <div class="row" id="top-div"> <!-- The users username --> <h3 class="text-primary">Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1> </div> <div class="row" id="middle-div"> <div class="form-group" id="chat-and-users"> <div> <div class="col-xs-9 bg-info" id="chat-column"> <!-- Chat Column --> <ul id="messages"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> <div class="col-xs-3 bg-success" id="users-column"> <!-- Users Column --> <h4><b>Online Users:</b></h4> <ul id="online-users"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> </div> </div> </div> <div class="row" id="bottom-div"> <form action="" id="input-button-form"> <div class="form-group"> <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message..."> </div> <button type="submit" id="button-send" class="btn btn-primary">Submit</button> </form> </div> </div> 

Answer 3

#chat-column具有左右填充（來自.col-xs-9類），只需將其刪除即可。

#chat-column {padding: 0;}

 html, body { height: 100%; background-color: #E5E5E5; } #nav-bar { margin-bottom: 0; } #chat-column {padding: 0;} #messages { list-style-type: none; margin: 0; padding: 0; width: 100%; } #messages li { padding: 5px 10px; width: 100%; } #messages li:nth-child(even) { background: #88e9e1; } #online-users { list-style-type: none; padding-left: 0; } #online-users li:nth-child(odd) { color: #373737; } #online-users li:nth-child(even) { color: #777777; } #container { height: 100%; } #middle-div { border-radius: 3px; border: 1px solid #202020; } #chat-column { height: 65vh; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: 1px solid #202020; /* Keep messages from overflowing out of rectangle */ word-wrap: break-word; /* Contain messages as a scrollable list inside the rectangle */ overflow-y: auto; } #users-column { height: 65vh; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #202020; /* Keep usernames from overflowing out of rectangle */ word-wrap: break-word; /* Contain usernames as a scrollable list inside the rectangle */ overflow-y: auto; } #bottom-div { margin-top: 15px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container" id="container"> <div class="row" id="top-div"> <!-- The users username --> <h3 class="text-primary">Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1> </div> <div class="row" id="middle-div"> <div class="form-group" id="chat-and-users"> <div> <div class="col-xs-9 bg-info" id="chat-column"> <!-- Chat Column --> <ul id="messages"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> <div class="col-xs-3 bg-success" id="users-column"> <!-- Users Column --> <h4><b>Online Users:</b></h4> <ul id="online-users"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> </div> </div> </div> <div class="row" id="bottom-div"> <form action="" id="input-button-form"> <div class="form-group"> <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message..."> </div> <button type="submit" id="button-send" class="btn btn-primary">Submit</button> </form> </div> </div> 

Answer 4

我認為這對您有用：

我添加了以下代碼：

#messages li {
    padding: 5px 10px;
    width: calc(100% + 30px);
    margin-left: -15px;
}

 html, body { height: 100%; background-color: #E5E5E5; } #nav-bar { margin-bottom: 0; } #messages { list-style-type: none; margin: 0; padding: 0; width: 100%; } #messages li { padding: 5px 10px; width: calc(100% + 30px); margin-left: -15px; } #messages li:nth-child(even) { background: #88e9e1; } #online-users { list-style-type: none; padding-left: 0; } #online-users li:nth-child(odd) { color: #373737; } #online-users li:nth-child(even) { color: #777777; } #container { height: 100%; } #middle-div { border-radius: 3px; border: 1px solid #202020; } #chat-column { height: 65vh; border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-right: 1px solid #202020; /* Keep messages from overflowing out of rectangle */ word-wrap: break-word; /* Contain messages as a scrollable list inside the rectangle */ overflow-y: auto; } #users-column { height: 65vh; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #202020; /* Keep usernames from overflowing out of rectangle */ word-wrap: break-word; /* Contain usernames as a scrollable list inside the rectangle */ overflow-y: auto; } #bottom-div { margin-top: 15px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container" id="container"> <div class="row" id="top-div"> <!-- The users username --> <h3 class="text-primary"> Logged in as: <i><b><span id="username"><%= loggedInUser.username %></span></b></i></h1> </div> <div class="row" id="middle-div"> <div class="form-group" id="chat-and-users"> <div> <div class="col-xs-9 bg-info" id="chat-column"> <!-- Chat Column --> <ul id="messages"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> <div class="col-xs-3 bg-success" id="users-column"> <!-- Users Column --> <h4><b>Online Users:</b></h4> <ul id="online-users"> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> <li>Test Text</li> </ul> </div> </div> </div> </div> <div class="row" id="bottom-div"> <form action="" id="input-button-form"> <div class="form-group"> <input type="text" id="message-input" autocomplete="off" class="form-control" placeholder="Type a message..."> </div> <button type="submit" id="button-send" class="btn btn-primary">Submit</button> </form> </div> </div> 

希望對您有幫助。

Answer 5

請在課程行中添加.mx-0課程。

.mx-0{
margin-left:0 !important;
margin-right:0 !important;
}