www.baike369.com
百科369 > XML教程 > XML使用CSS样式表设置元素的相对定位时遇到的重叠现象

XML使用CSS样式表设置元素的相对定位时遇到的重叠现象


XML使用CSS样式表设置元素的相对定位时遇到的重叠现象

1. XML文档name.xml的源代码如下:

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="name.css" ?>
<page>
   <pageNumber>1</pageNumber>
   <paragraph>This book is called <reference>Beginning XML</reference>
   <footnoteNumber>3</footnoteNumber>, it will help you to learn
   <keywords>XML</keywords>.</paragraph>
</page>

2. CSS样式表文件name.css的源代码如下:

keywords {
   display:inline;
   position:relative; right:45px;
   background-color:#ffffff;
   color:#990000;
   font-weight:bold;
   border:solid; border-width:2px; border-color:#CCCCCC;} 
footnoteNumber {
   position:relative; top:3px;
   display:inline;
   font-size:9pt; font-weight:bold;
   color:#990000;
   border-style:solid; border-width:2px; border-color:#CCCCCC;}
page {
   display:block;
   padding:10px;
   margin:10px;
   border-style:solid; border-width:4px; border-color:#000000;}
pageNumber {
   display:inline;
   font-style:italic;
   border-style:solid; border-width:4px; border-color:#CCCCCC;}
paragraph {
   display:block;
   padding:10px;
   border:solid; border-width:4px; border-color:#CCCCCC;}
reference {
   display:inline;
   font-style:italic;
   color:#CC3333;
   border:solid; border-width:2px; border-color:#CCCCCC;}
keyword {
   display:inline;
   font-weight:bold;
   color:#990000;
   border:solid; border-width:2px; border-color:#CCCCCC;}

3. 在浏览器中显示name.xml文档的效果。如下图所示:

XML使用CSS样式表设置元素的相对定位时遇到的重叠现象

通过修改keywords元素的right属性的值,可以解决遇到的重叠现象。

Copyright© 2011-2016 www.baike369.com All Rights Reserved