When I write something like:
<table style="margin-left: 30px;" >
</table>
or:
<div style="margin-left: 30px;">
<h:commandButton value="add" action="a"></h:commandButton>
<h:commandButton value="cancel" action="b" immediate="true"></h:commandButton>
</div>
The margin shows up properly.
But when I write:
<table class="marg" >
</table>
or:
<div class="marg">
<h:commandButton value="add" action="a"></h:commandButton>
<h:commandButton value="cancel" action="b" immediate="true"></h:commandButton>
</div>
With this rule:
.marg {
margin-left: 50px;
margin-top: 30px;
}
HTML generated code:
<table class="marg">
</table>
<div class="marg">
<input id="j_id1109917403_4227fec1:j_id1109917403_4227feb3" type="submit" value="add" name="j_id1109917403_4227fec1:j_id1109917403_4227feb3">
<input id="j_id1109917403_4227fec1:j_id1109917403_4227feae" type="submit" value="cancel" name="j_id1109917403_4227fec1:j_id1109917403_4227feae">
</div>
The table and button display without margin. Why ?
Test if the CSS rule is applied by adding a background-color
:
.marg { margin-left: 50px; margin-top: 30px; background-color: pink; }
If yes, then add !important
to your existing instruction for testing purpose:
.marg { margin-left: 50px !important; margin-top: 30px !important; background-color: pink; }
Is your CSS applied? Does !important
change something? What do you see in Firebug? Come back with a fiddle (without CSS reset!) if you still have a problem: HTML and CSS code can help us to understand your problem; back-end code that generates HTML doesn't
Oh, please sorry, it was my very stupid mistake. I forget to add in HTML :
<link rel="stylesheet" type="text/css" href="style/myCSS.css" media="all" />
I thought that I added it.
.marg css类的左边距设置为50px,这与属性内部的设置为30px不同。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.