鍍金池/ 問答/HTML/ 子元素寬度如何撐開父元素寬度

子元素寬度如何撐開父元素寬度

clipboard.png

如圖這是一個橫向滾動欄，子元素高度會自動撐開父元素的高度，但是好像子元素寬度不能自動撐開父元素的寬度，如何使用css使子元素寬度可以自動撐開父元素寬度，避免計算父元素的寬度。

回答
編輯回答
陌顏

橫向滾動布局 white-space: nowrap;

內(nèi)部元素 display: inline-block;

2017年2月25日 05:58
編輯回答
做不到

正常來說肯定是可以的，不能撐開的原因有很多，可能是子元素浮動了，可能是父元素固定了寬度，具體是因為啥，還是需要看源碼才行

2017年11月21日 19:21
編輯回答
情殺

沒有 demo 的問題都不是好問題

2017年8月13日 14:19
編輯回答
毀與悔

父元素沒有高度，可能是子元素浮動造成的，清除浮動即可 請百度 clearfix

2017年1月25日 07:40
編輯回答
心癌

看看你的父元素高度是不是0 很可能是子元素導(dǎo)致父元素高度塌陷..
因為子元素浮動之后脫離了文本流.
這時候只需清楚浮動即可..百度清除浮動的方法

2017年6月4日 11:12
編輯回答
毀憶
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style lang="">
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 640px;
            margin: 0 auto;
            background-color: #eee;
        }

        .nav {
            overflow-y: auto;
        }

        ul {
            list-style: none;
            display: inline-block;
            white-space: nowrap;
            font-size: 0;
        }

        li {
            display: inline-block;
            width: 80px;
            text-align: center;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="nav">
            <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
                <li>test6</li>
                <li>test7</li>
                <li>test8</li>
                <li>test9</li>
            </ul>
        </div>

    </div>
</body>

</html>
2017年12月24日 07:50
編輯回答
心沉
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>無標題文檔</title>
</head>

<body>
    <style>
        .box{width:300px;height:100px;background:#000;}
        .inner{white-space:nowrap;width:auto;display:inline-block;zoom:1;*display:inline;margin:10px 0 0 10px;background:#FC9;}
        .inner span{display:inline-block;width:80px;height:100px;margin:0 10px;background:#dd4215;}
    </style>
    <div class="box">
        <div class="inner">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>

圖片描述

2017年7月2日 04:27