滚动x在css中不起作用

Question

我在css中遇到了scroll-x的问题

请在下面找到html代码

<div id=main_user_chat_tab_div class="chat-container_div" style="border:4px solid #F00;">
    <div id="chat_box_win" class="chat_box_win" style="position:relative;"></div>
    <div id="chat_user_rec" style="width:100%; height:20%; border:3px solid #333;overflow-y:hidden;overflow-x:scroll; display:table-row; position:relative;">        
        <div id="user_chat_image"></div>
        <div id="user_chat_image"></div>
        <div id="user_chat_image"></div>
        <div id="user_chat_image"></div>
        <div id="user_chat_image"></div>
        <div id="user_chat_image"></div>    
    </div>
</div>

css代码：

 .chat-container_div {
    width: 20.2%;    
    height:72%;
    margin-right:15%;
    margin-top:11%;
    float:right;
    position:relative;
    display:none;
  }



#user_chat_image {

    position:relative;
    display:inline;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    bottom:0px;
    float:right; margin-right:2%; width:60px; height:60px;  display:block;
}

在下面的屏幕中，当外部div chat_user_rec 已满时，我想要scroll-x。但是在屏幕下方它不起作用，溢出div正在添加到下一行。请你知道吗。我认为有些事情是错误的。

Answer 1

如果我正确解释您的问题，我相信您应该在父元素上使用white-space: nowrap;来获得所需的效果。看看这里：Codepen

我简化了你的例子。首先，HTML：

<div id=main_user_chat_tab_div class="chat-container_div" style="border:4px solid #F00;">
  <div id="chat_box_win" class="chat_box_win" style="position:relative;"></div>
  <div id="chat_user_rec" style="width:auto; height:20%;overflow-y:hidden;overflow-x:scroll; display:block; position:relative; white-space: nowrap; text-align: right;">
    <div class="user_chat_image"></div>
    <div class="user_chat_image"></div>
    <div class="user_chat_image"></div>
    <div class="user_chat_image"></div>
    <div class="user_chat_image"></div>
    <div class="user_chat_image"></div>
  </div>
</div>

CSS：

.chat-container_div {
  width: 20.2%;
  height: 72%;
  margin-right: 15%;
  margin-top: 11%;
  float: right;
  position: relative;
}

.user_chat_image {
  position: relative;
  display: inline-block;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  margin-right: 2%;
  width: 60px;
  height: 60px;
}

注意：您对user_chat_image使用的ID不正确，因此您应该将其切换到HTML和CSS中的类，就像我在这里一样。

我还建议将所有样式移动到CSS文件中，然后移出HTML。