Question

我正在撰写此页面：

http://g33ktalk.com/etsy-a-deep-dive-into-monitoring-with-skyline/

你看到底部的图像，订阅的图像没有填充并触及div。

我试着这样做：

#gform_submit_button_8
{
    padding-left: 15px;
}

但这没有效果。我还尝试向类gform_footer添加填充，但它也没有效果。有人知道如何在该图像的左侧添加填充吗？

编辑：

这是此图片所在的较大的HTML

<div class='gf_browser_chrome gform_wrapper' id='gform_wrapper_8' >
  <form method='post' enctype='multipart/form-data' id='gform_8' action='/etsy-a-deep-dive-into-monitoring-with-skyline/'>
    <div class='gform_heading'>
      <h3 class='gform_title'>Subscribe to our YouTube Channel</h3>
      <span class='gform_description'>Want to get more tech talks? Subscribe to our YouTube channels and get notified when new talks are posted.</span>
    </div>
    <div class='gform_body'>
      <ul id='gform_fields_8' class='gform_fields top_label description_below'>
      </ul>
    </div>
    <div class='gform_footer top_label'>
      <input type='image' src='http://g33ktalk.com/wp-content/uploads/2012/10/subscribe.gif' id='gform_submit_button_8' class='gform_image_button' alt='Submit' tabindex='1' />
...

谢谢！

Answer 1

来自CSS的

:(在此更新填充值）

.gform_wrapper .gform_footer {
    padding: 16px 0 10px 15px;
    margin: 16px 0 0 0;
    clear: both
}

Answer 2

Usualy当我遇到这种问题时，我会检查我的整个CSS。尝试使用bootstarp，因为它们有div，它会将你的内容转移到页面上的特定位置。有时我们不能说我们用CSS做错了所以我通常做的是尝试使用Firebug（firefox）或chrome（DEV工具）进行测试。或者使用http://cssdesk.com/来测试我的网页。

Answer 3

关键是使选择器足够具体，以覆盖随后的任何后续CSS规则。

我不会使用!important，相反，我会尝试类似：

div.gform_wrapper .gform_footer {
    padding: 16px 0 10px 0;
    margin: 16px 0 0 0;
    clear: both
}

无法使图像的CSS对齐工作

3 个答案: