CSS自适应内容宽度示例

来源:互联网 发布:手机网络短信 编辑:程序博客网 时间:2024/06/10 15:37

CSS自适应内容宽度示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS自适应内容宽度示例</title><style>.main{ width:300px; height:50px; position:absolute; background-color:#0FF; overflow:hidden;}.main ul{ list-style:none; position:absolute; background-color:#00F; word-break:keep-all; white-space:nowrap;}.main li{ display:inline; background-color:#F00;}</style></head><body><div class="main">    <ul>        <li>aaaaaaa</li>            <li>bbb</li>            <li>cccccccc</li>            <li>ddddddd</li>            <li>ffffff</li>            <li>eeeeee</li>            <li>hhhhhh</li>            <li>gggg</li>            <li>xxxxx</li>        </ul>    </div></body></html>


0 0