1. 首页
  2. 问题列表
  3. CSS避免ul列表项浮动到框中
提问者：小点点

CSS避免ul列表项浮动到框中


null

(function(){
    var ul = document.createElement('ul');
    ul.setAttribute('id','proList');

    var t, tt;
    productList=["product1", "product2", "product3", "product4"]; 
    

    document.getElementById('renderList').appendChild(ul);
    productList.forEach(renderProductList);

    function renderProductList(element, index, arr) {
        var li = document.createElement('li');
        li.setAttribute('class','item');
        
        ul.appendChild(li);
        
        t = document.createTextNode(element);
        
        li.innerHTML=li.innerHTML + element;
    }
})();
* {
    margin: 0;
    padding: 0;
  }
   
  body {
    margin: 20px auto;
    font-family: "Lato";
    font-weight: 300;
    overflow: auto;
  }
   
  form {
    padding: 15px 25px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
   
  form label {
    font-size: 1.5rem;
    font-weight: bold;
  }
   
  input {
    font-family: "Lato";
  }
   
  a {
    color: #0000ff;
    text-decoration: none;
  }
   
  a:hover {
    text-decoration: underline;
  }
   
  #wrapper,
  #loginform {
    margin: 0 auto;
    padding-bottom: 25px;
    background: #eee;
    width: 600px;
    max-width: 100%;
    border: 2px solid #212121;
    border-radius: 4px;
  }
   
  #loginform {
    padding-top: 18px;
    text-align: center;
  }
   
  #loginform p {
    padding: 15px 25px;
    font-size: 1.4rem;
    font-weight: bold;
  }
   
  #chatbox {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 10px;
    background: #fff;
    height: 300px;
    width: 530px;
    border: 1px solid #a7a7a7;
    overflow: auto;
    border-radius: 4px;
    border-bottom: 4px solid #a7a7a7;
  }
   
  #usermsg {
    flex: 1;
    border-radius: 4px;
    border: 1px solid #ff9800;
  }
   
  #name {
    border-radius: 4px;
    border: 1px solid #ff9800;
    padding: 2px 8px;
  }
   
  #submitmsg,
  #enter{
    background: #ff9800;
    border: 2px solid #e65100;
    color: white;
    padding: 4px 10px;
    font-weight: bold;
    border-radius: 4px;
  }
   
  .error {
    color: #ff0000;
  }
   
  #menu {
    padding: 15px 25px;
    display: flex;
    overflow: auto;
  }
   
  #menu p.welcome {
    flex: 1;
  }
   
  a#exit {
    color: white;
    background: #c62828;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
  }
   
  .msgln {
    margin: 0 0 5px 0;
  }
   
  .msgln span.left-info {
    color: orangered;
  }
   
  .msgln span.chat-time {
    color: #666;
    font-size: 60%;
    vertical-align: super;
  }
   
  .msgln b.user-name, .msgln b.user-name-left {
    font-weight: bold;
    background: #546e7a;
    color: white;
    padding: 2px 4px;
    font-size: 90%;
    border-radius: 4px;
    margin: 0 5px 0 0;
  }
   
  .msgln b.user-name-left {
    background: orangered;
  }
  
  
ul#proList{
  margin-top: 50px; 
}
li.item{
  list-style:none; 
  padding:5px; 
  border-radius: 1px;
  border: 1px solid #005eff;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        
        <title>xxxxxxxxxxxxx</title>
        <meta name="description" content="xxxxxxx" charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
    </head> 
    <body>
      
<div id="renderList" style="float:right; overflow: hidden;">
<b>Product catalog:</b>
</div>

        <div id="wrapper">
            <div id="menu">
                <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b>!</p>
                <p class="logout"><a id="exit" href="#">Logout</a></p>
            </div>
     
            <div id="chatbox">
            </div>
 
            <form name="message" action="">
                <input name="usermsg" type="text" id="usermsg" required/>
                <input name="submitmsg" type="submit" id="submitmsg" value="Send" required/>
            </form>
        </div>

null

所以，这是我第一次尝试做一个简单的“聊天”。但现在我遇到了CSS的问题。

我怎样才能保持在chatbox的“产品目录”行（li项目）之外？因为，如果它是全屏的，它就在外面。

但是如果窗口调整了大小，那么它就不再工作了。

在style.css中必须修改什么才能使工作正常？


共1个答案

匿名用户

你应该把它们包装起来，然后使用flex，我更改了聊天宽度，你可以根据自己的喜好修改它，而不是margin:auto；调整内容:中心；所以它将处于中心位置

null

(function(){
    var ul = document.createElement('ul');
    ul.setAttribute('id','proList');

    var t, tt;
    productList=["product1", "product2", "product3", "product4"]; 
    

    document.getElementById('renderList').appendChild(ul);
    productList.forEach(renderProductList);

    function renderProductList(element, index, arr) {
        var li = document.createElement('li');
        li.setAttribute('class','item');
        
        ul.appendChild(li);
        
        t = document.createTextNode(element);
        
        li.innerHTML=li.innerHTML + element;
    }
})();
#new {
    display: flex;
    flex-direction: row-reverse;
    justify-content:center;
  
}
* {
    margin: 0;
    padding: 0;
  }
   
  body {
    margin: 20px auto;
    font-family: "Lato";
    font-weight: 300;
    overflow: auto;
  }
   
  form {
    padding: 15px 25px;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
   
  form label {
    font-size: 1.5rem;
    font-weight: bold;
  }
   
  input {
    font-family: "Lato";
  }
   
  a {
    color: #0000ff;
    text-decoration: none;
  }
   
  a:hover {
    text-decoration: underline;
  }
   
  #wrapper,
  #loginform {
    
    padding-bottom: 25px;
    background: #eee;
    width: 600px;
    max-width: 100%;
    border: 2px solid #212121;
    border-radius: 4px;
  }
   
  #loginform {
    padding-top: 18px;
    text-align: center;
  }
   
  #loginform p {
    padding: 15px 25px;
    font-size: 1.4rem;
    font-weight: bold;
  }
   
  #chatbox {
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 10px;
    background: #fff;
    height: 300px;
    width:88%;
    border: 1px solid #a7a7a7;
    overflow: auto;
    border-radius: 4px;
    border-bottom: 4px solid #a7a7a7;
  }
   
  #usermsg {
    flex: 1;
    border-radius: 4px;
    border: 1px solid #ff9800;
  }
   
  #name {
    border-radius: 4px;
    border: 1px solid #ff9800;
    padding: 2px 8px;
  }
   
  #submitmsg,
  #enter{
    background: #ff9800;
    border: 2px solid #e65100;
    color: white;
    padding: 4px 10px;
    font-weight: bold;
    border-radius: 4px;
  }
   
  .error {
    color: #ff0000;
  }
   
  #menu {
    padding: 15px 25px;
    display: flex;
    overflow: auto;
  }
   
  #menu p.welcome {
    flex: 1;
  }
   
  a#exit {
    color: white;
    background: #c62828;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
  }
   
  .msgln {
    margin: 0 0 5px 0;
  }
   
  .msgln span.left-info {
    color: orangered;
  }
   
  .msgln span.chat-time {
    color: #666;
    font-size: 60%;
    vertical-align: super;
  }
   
  .msgln b.user-name, .msgln b.user-name-left {
    font-weight: bold;
    background: #546e7a;
    color: white;
    padding: 2px 4px;
    font-size: 90%;
    border-radius: 4px;
    margin: 0 5px 0 0;
  }
   
  .msgln b.user-name-left {
    background: orangered;
  }
  
  
ul#proList{
  margin-top: 50px; 
}
li.item{
  list-style:none; 
  padding:5px; 
  border-radius: 1px;
  border: 1px solid #005eff;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        
        <title>xxxxxxxxxxxxx</title>
        <meta name="description" content="xxxxxxx" charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
    </head> 
    <body>
    <div id="new"  >
<div id="renderList" style="">
<b>Product catalog:</b>
</div>

        <div id="wrapper">
            <div id="menu">
                <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b>!</p>
                <p class="logout"><a id="exit" href="#">Logout</a></p>
            </div>
     
            <div id="chatbox">
            </div>
 
            <form name="message" action="">
                <input name="usermsg" type="text" id="usermsg" required/>
                <input name="submitmsg" type="submit" id="submitmsg" value="Send" required/>
            </form>
        </div>
        </div>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS