Question

我试图将一个页脚小部件中的三个小徽标对齐在一行中（使用Wordpress，主题是按下编码器）我已经创建了一个模拟我想要的内容：

然而，一切都在倾向于超越信仰！

你可以在我的页脚中看到这个烂摊子：

www.oxfordlifestylecentre.co.uk

我尝试过使用div和table，我的最新表格如下：

<table align="right">
 <tr>
  <td>
    <a href="/gym/">
    <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" />
  </td>
  <td>
    <a href="/hair-and-beauty/>
    <img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" />
  </td>
 </tr>
</table>

Answer 1

您的HTML语法错误。您缺少关闭锚点和引号。试试这个。

<table align="right">
    <tr>
        <td>
            <a href="/gym/">
                <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" /></a>
        </td>
        <td>
            <a href="/hair-and-beauty/">
            <img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" /></a>
        </td>
   </tr>
</table>

Answer 2

试试这个，Fiddle

<div class="logos">
  <a href="/gym/">
    <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-logo.jpg" alt="Health and Fitness" />
  </a>
  <a href="/hair-and-beauty/">
    <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-logo.jpg" alt="Hair and Beauty" />
  </a>
  <a href="/nutrition-and-refreshment/">
    <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/nutrition-and-refreshment.jpg" alt="Nutrition and Refreshment" />
  </a>
</div>

.logos {
  float: right;
  clear: right;
  width: 500px;
  height: 50px;
}
.logos img {
  height: 80%;
}
.logos a {
  text-decoration: none;
}

*注意：为了获得最佳效果，请将图片调整为相同尺寸。

Answer 3

正如之前的回答所指出的，您的HTML语法错误。但是，使用表格并不是正确的方法。您可以简单地将链接和图像保持内联和文本对齐。

这取决于布局的复杂性，但显示：可能需要内联块，或者您可能需要将某些元素包装在容器中。这两种方法都优于使用表格进行布局（Why not use tables for layout in HTML?）

HTML

<a href="#"><img src="http://placekitten.com/g/200/300" /></a><a href="#"><img src="http://placekitten.com/g/200/300" /></a><a href="#"><img src="http://placekitten.com/g/200/300" /></a>

CSS

body {
  text-align: right;
}

a {
  margin-right: 10px;
}

http://jsbin.com/wuvoriye/1/edit

Answer 4

好的，从哪里开始：

1：不要使用桌子。 2：不要用桌子。 3：你在这里得到了照片......

现在进行修复：我已经为你留下了评论，以便解释我的所作所为。我为你添加了内联样式，所以只需将它添加到你的css文件中。

<section class="footer-widget-container">
    <div id="footer-widget-area" class="inside widget-area">
        <!-- Social Media Div First -->
        <div id="pc_info_widget_designfolio-pro-3" class="widget pc_info_widget" style="width: 40%; float: left;">
            <!-- simple p tag with a class is all that needed -->
            <p class="phone" style="margin: 0; padding: 0;">
                (949) 867-5307
            </p>
            <!-- keep it simple: list items floated left + you can now just add as many as you want -->
            <ul style="float: left; margin: 0; padding: 0;">
                <li style="float: left; list-style: none;">
                    <a class="sm-icon" target="_blank"  href="http://www.facebook.com//lifestyle-center">
                        <img width="32" height="32" alt="Facebook" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/facebook.png">
                    </a>
                </li>
                <li style="float: left; list-style: none;">
                    <a class="sm-icon" target="_blank" href="http://twitter.com//lifestylecentre">
                        <img width="32" height="32" alt="Twitter" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/twitter.png">
                    </a>
                </li>
            </ul>
        </div>
        <!-- Logo Div Second -->
        <div id="text-8" class="widget widget_text" style="width: 60%; float: left;">
            <div class="textwidget">
                <!-- Dont use tables unless its table data | Simple ul list itmes float left again -->
                <ul style="float: right;">
                    <li style="float: left; list-style: none;">
                        <a href="/gym/">
                            <img alt="Health and Fitness" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg">
                        </a>
                    </li>
                    <li style="float: left; list-style: none;">
                        <a href="/hair-and-beauty/">
                            <img alt="Hair and Beauty" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-1.jpg">
                        </a>
                    </li>
                 </ul>
            </div>
        </div>
    </div>
</section>

修复页脚表/ div问题

4 个答案: