怎样把引用式样式表改为内联式样式表 ?解决思路-HTML教程-爱易网页

怎样把引用式样式表改为内联式样式表 ?解决思路

日期：2014-05-17　浏览次数：20698 次

怎样把引用式样式表改为内联式样式表 ?
我不知道标题有没有写明白,连我自己看着标题都觉得怪怪的,

问题是这样的,
我原来是用引用式样式表来引用外部的CSS文件,

HTML code

<link href="css.css" rel="stylesheet" type="text/css" />

css.css的代码

CSS code

#attributes .attributes-list li{display:inline;float:left;width:206px;height:24px;margin-right:20px;overflow:hidden;text-indent:5px;line-height:24px;white-space:nowrap;text-overflow:ellipsis;}

在页面里调用

HTML code

 <div id="attributes" class="attributes">
<ul class="attributes-list">
<li >产品名称：I9100</li>
<li >品牌:&nbsp;Samsang</li>
......

</ul>

</div>

这样页面可以正常显示

现在我想把引用式样式表改为内联式样式表
于是我在页面里删除了

HTML code

<link href="css.css" rel="stylesheet" type="text/css" />

把调用的地方改为

HTML code

 <div id="attributes" class="attributes">
<ul style="display:inline;float:left;width:206px;height:24px;margin-right:20px;overflow:hidden;text-indent:5px;line-height:24px;white-space:nowrap;text-overflow:ellipsis;">
<li >产品名称：I9100</li>
<li >品牌:&nbsp;Samsang</li>
......

</ul>

</div>

结果页面显示异常了,
请问要怎样修改呢
先谢谢

------解决方案--------------------
原来写的只是针对li的，
#attributes .attributes-list li{...}
这要写内联就得每个li上加style，但是不建议这样做，建议要真内联就放在页面的head中。
正确的写法：

HTML code


<ul>
   <li style="display:inline;float:left;width:206px;height:24px;margin-right:20px;overflow:hidden;text-indent:5px;line-height:24px;white-space:nowrap;text-overflow:ellipsis;">产品名称：I9100</li>
   <li style="display:inline;float:left;width:206px;height:24px;margin-right:20px;overflow:hidden;text-indent:5px;line-height:24px;white-space:nowrap;text-overflow:ellipsis;">品牌:&nbsp;Samsang</li>
......

</ul>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

怎样把引用式样式表改为内联式样式表 ?解决思路

相关资料更多>

推荐阅读更多>