2012-03-26 8 views
0

私は初心者から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> 

青の "unconfirmed"は、divの "行"内のアンカータグです。 (.rowの)

CSS:

-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の>リンク):

-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; 
+0

「margin-right:1em;」で始まり、好みに合わせて調整してください。 –

答えて

0

はあなたの.row > amargin-rightを与える必要があります。

.row > a{ 
padding-right:20px; 
} 
+0

こんにちは、これは、背景の矢印の画像とテキストを両方とも20ピクセル左に移動するので、私はまだ同じ問題に陥っています。私はそれがどこにあるのかを確認するために矢印が必要ですが、テキストは左に移動します。 – sprocket12

+0

余白の代わりに左に余白を付けます。 – sandeep

+0

パディング右:30pxでソートしました。どうもありがとう。 – sprocket12

関連する問題