我已经开发了一个HTML CSS代码。它适用于所有浏览器,但是当我将其上传到网站的侧边栏时,它无法正确显示。
<p>
<ul style="display:inline; list-style-type: none;">
<li style="
background:none repeat scroll 0 0 rgba(255, 57, 65, 0.9) !important;
text-decoration:none;
position: relative;
margin: 0 0 -6px 0;
padding: 15px 15px 15px 15px;
list-style:none;
width: 100%;
border: 0;
">
<a style="color: #000000; text-decoration: none;text-align:center;" href="#">F Awan</a></li>
<li style="background:none repeat scroll 0 0 rgba(255, 103, 57, 0.9) !important;padding:5px;text-decoration:none;width:95%;text-align:right;color: #000000; text-decoration: none;
position: relative;
margin: 0 0 -6px 0;
padding: 15px 15px 15px 15px;
list-style:none;
border: 0;
">(IT Consultant, UK) </li>
<li style="background:none repeat scroll 0 0 rgba(255, 218, 57, 0.9) !important;padding:5px;text-decoration:none;color: #000000; text-decoration: none;
position: relative;
margin: 0 0 -6px 0;
padding: 15px 15px 15px 15px;
width: 90%;
border: 0;
"><a style="color: #000000; text-decoration: none;text-align:center;" href="#">FUddin</a> </li>
<li style="background:none repeat scroll 0 0 rgba(193, 241, 78, 0.9) !important;padding:5px;text-decoration:none;width:85%;text-align:right;color: #000000; text-decoration: none;
position: relative;
margin: 0 0 -6px 0;
padding: 15px 15px 15px 15px;
list-style:none;
border: 0;
"> (Systems Engineer, Pakistan)</li>
<li style="
background:none repeat scroll 0 0 rgba(29, 195, 246, 0.9) !important;;padding:5px;
text-decoration:none;color: #000000; text-decoration: none;
position: relative;
margin: 0 0 -6px 0;
padding: 15px 15px 15px 15px;
list-style:none;
width: 80%;
border: 0;
">
<a style="color: #000000; text-decoration: none; href="mailto:[email protected]?Subject=Hello%20again">Interact with Us </a>
</li>
</ul>
</p>
这里是显示方式,
Here是JSFiddle。
最好删除width
并使用margin-right
代替它。这样写:
CSS
.red{
background:rgba(255, 57, 65, 0.9);
}
.orange{
background:rgba(255, 103, 57, 0.9);
text-align:right;
margin-right:5%;
}
.yellow{
background:rgba(255, 218, 57, 0.9);
margin-right:10%;
}
.green{
background:rgba(193, 241, 78, 0.9);
text-align:right;
margin-right:15%;
}
.blue{
background:rgba(29, 195, 246, 0.9);
margin-right:20%;
}
这是盒子模型的常见误解。如果指定width:100%
和添加padding
,则总体大小将超过100%。
为了避免此行为,请在列表项中嵌套另一个项(例如<div>
),并在这些项上使用边距。
您也可以使用box-sizing: border-box;
,但是并非所有浏览器都支持。
另请参见:
您可以尝试CSS3 box-sizing
。
这是给您的更新的jsfiddle。
这样的东西?http://jsfiddle.net/pwvV5/
我为ul插入了一个ID,因此不会与其他ul混淆。然后在CSS中为其添加宽度,以免溢出。