Question

我正在设计一个网站，我希望页脚在左下方有两个小图像，然后是@ * （一个推特地址）。在页脚中间我想要地址，在页脚右侧我想要联系号码。

目前我在页脚div中拥有上述所有内容，但它们并非全部对齐。图像相距很远，文本位置错误。文本位于图像下方和右侧。但是我希望所有东西都水平对齐。

我在macromedia dreamweaver上使用HTML和CSS。

目前的代码是：

<div class="footer content">
    <ul>
        <li> <img src="Images/facebook.png" />  <img src="Images/twitter.png" />  </li>
        <li>@TWITTERADRESS</li>
        <li>POSTAL ADDRESS </li>        
        <li>TEL NUMBER</li>
    </ul>
</div> <!--end of footer-->

CSS

.footer    {
       text-align:centre;
       background-color:#C8C8C8;
       color:#000000;
           padding-bottom:1em;
       }

Answer 1

可能是这样的：

.footer    {
   text-align:centre;
   background-color:#C8C8C8;
   color:#000000;
       padding-bottom:1em;
   }
.footer li{
float: left;
width: 25%;
}

Answer 2

首先将CSS编辑为

.footer ul li {
   display: inline; // in a straight line
}

将HTML部分编辑为：

<div class="footer">
  <ul>
    <li class="image"><img src="Images/facebook.png" />
    <img src="Images/twitter.png" /></li>
    <li class="twitter">@TWITTERADRESS</li>
    <li class="address">POSTAL ADDRESS </li>        
    <li class="number">TEL NUMBER</li>
  </ul>
</div>

现在编辑CSS部分：

.image {
   float: left; // float to the left
}

.number {
   float: right; // float to the right
}

在此处试试：http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/

Answer 3

从设计师的角度来看......使用Photoshop，Illustrator，Freehand或类似设计，您可以设计一个漂亮的页脚，或者更好的整个页面的精美草稿，这是您希望看到的。然后，从标记框架开始写这样的部分（html5）：

<div id="wrapperdiv">

<header>
<nav>
<ul>
<li><a href='#'>home</li>
<li>...
<li><a href='#'>contact</li>
</ul>
</nav>
</header>
<section><blockquote>...</blockquote>...</section>
...
<footer>
<img src='.../footerLogo_left.png' id='footerLogo_left'>
<img src='.../footerMiddle_text.png' id='footerMiddle_text'>
<img src='.../footerLogo_right.png' id='footerLogo_right'>
</footer>
</div>

此时我们可以编写CSS3代码（可能是styles.css）：

...
#wrapperdiv {background...}
header {width...}
nav li a{...}
...
footer{
width:...;
height:...;
margin:...;
}

接下来要做的是从草稿中剪切图像，如footer_bg.png，footerLogo_left.png，footerLogo_right.png，footerMiddle_text.png ...，并将它们链接到标记：

footer{
background:url(.../footer_bg.png) repeat_x;   
width:...;
height:...;
margin:...;
}

#footerLogo_left {
float:left;
margin:...}

#footerMiddle_text {
float:left;
margin: (the same than left)}

#footerLogo_right {
float:right;
margin: (the same than left)}

好吧，它并不像看起来那么容易，但这种方式可以为你提供非常直观的网站（图形草稿+ html骨架+ css样式）。

HTML和CSS对齐图像和文本

3 个答案: