文本相对于背景图像和外部容器的对齐方式

时间：2012-03-26 16:13:16

标签： css iui

我是css的初学者，请有人帮助我让这个元素看起来像下面的元素。

错误：

enter image description here

从右：

enter image description here

Html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Cover Plus</title>
    <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="scripts/ajax.js"></script>
    <script type="application/x-javascript" src="iui/iui.js"></script>
    <link type="text/css" href="iui/iui.css" rel="stylesheet" />
    <link type="text/css" href="iui/t/default/default-theme.css" rel="stylesheet" />
    <link type="text/css" href="styles/iui-panel-list.css" rel="stylesheet" />
    <meta name="viewport" id="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="img/touch-icon-iphone.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="img/touch-icon-ipad.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="img/touch-icon-iphone4.png" />
    <link rel="apple-touch-startup-image" href="img/startup.png" />
</head>
<body>

    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" href="#"></a>
    </div>


    <div id="factorDetailsPanel" title="Details" class="panel">
<fieldset><div class="row"><label>Status</label><a href="javascript:GetAllFactors()">Unconfirmed</a></div></fieldset>
</div>

</body>
</html>

蓝色“未经证实”是div“行”内的锚标记。

CSS（.row）：

-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: black;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: black;
border-left-style: none;
border-left-width: 0px;
border-right-color: black;
border-right-style: none;
border-right-width: 0px;
border-top-color: black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
color: black;
display: block;
font-family: Helvetica;
font-size: 16px;
height: 42px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 42px;
overflow-x: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
text-align: right;
width: 323px;

CSS（.row＆gt;链接）：

-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url(.../iui/t/default/listArrow.png);
background-origin: padding-box;
border-bottom-color: #385487;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #385487;
border-left-style: none;
border-left-width: 0px;
border-right-color: #385487;
border-right-style: none;
border-right-width: 0px;
border-top-color: #385487;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
color: #385487;
cursor: auto;
display: block;
float: right;
font-family: Helvetica;
font-size: 16px;
height: 19px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 9px;
padding-left: 10px;
padding-right: 0px;
padding-top: 11px;
position: static;
text-align: right;
text-decoration: none;
text-overflow: ellipsis;
width: 88px;

1 个答案:

答案 0 :(得分：0)

您必须向margin-right提供.row > a。写得像这样：

.row > a{
padding-right:20px;
}
相关问题
最新问题