zoukankan      html  css  js  c++  java
  • 如何使ul中li元素横向排列且不换行

    外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行?

    解决方法:主要是外面容器设置为white-space:nowrap;li设置为display:inline-block;而不是float:left;

    <!DOCTYPE html>
    <html>
    <head>
    <style>
     
    #pic_list
    {
    display:block;
    white-space:nowrap;
    500px;
    overflow:auto;
    }
    #pic_list li
    {
    80px;
    height:80px;
    margin:3px;
    background:red;
    display:inline-block;
    }
    </style>
     
    </head>
    <div id="pic_list">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    </body>
    </html>
  • 相关阅读:
    vim 命令详解
    vim基础命令
    JSP取得绝对路径
    sigar开发(java)
    HDU-5273
    HDU-1671
    HDU-1251
    POJ-1743
    POJ-2774
    hihocoder 1145 : 幻想乡的日常
  • 原文地址:https://www.cnblogs.com/liujiale/p/5258045.html
Copyright © 2011-2022 走看看