0

请帮忙。我想实现黄色框上的文本和按钮左右对齐（左侧的文本 - 边距 20 px；右侧的按钮 - 边距 20 px）并且页脚中的菜单与黄色框对齐。

无法添加图片，抱歉。

编辑：添加了 JSFiddle - http://jsfiddle.net/wqBEf/

这是我的 CSS 代码：

        #page
    {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid red;
        background-color: blue;
    }

    #page > #main
    {
        border: 1px solid #000;
        width: 650px;
        margin-left: auto;
        margin-right: auto;
        background: white;
        border-radius: 5px;
        margin-top: 20px;
    }

    #main > #inner
    {
        margin: 20px;

    }

    #page-title h1
    {
        font-size: 24px;
        text-align: center;
    }

    #footer-hotline
    {
        height: 50px;
        background-color: rgb(255,207,0);
        border-radius: 5px;
        box-shadow: 0px 3px 3px #999999;

        margin-top: 20px;
        border: 1px solid #000;
        width: 650px;
        margin-left: auto;
        margin-right: auto;

        position: relative;
        z-index: 2;
    }

    #footer-hotline > .part
    {
        float: left; width: 33%;
        margin-left: 20px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
    }
    #footer-hotline > .part input
    {
        vertical-align:middle;
    }

    #footer
    {
        margin-top: -25px;
        height: 100px;
        line-height: 25px;
        background-color: white;
        text-transform: uppercase;
        border: 1px solid black;
    }

    #footer > .link
    {
        float: left;
        border-right: 1px solid #000;
        margin-top: 50px;
    }

    #footer > .link > div
    {
        margin-left: 5px;
        margin-right: 5px;
    }

这是我的html代码：

<div id="page">
<div id="main">
    <div id="inner">
        <div id="page-title">
            <img src="myLogo.png" alt="Schulz logo" />
            <h1>Some title</h1>
        </div>
        <div id="content">RenderBody</div>        
    </div>
    <div class="f-c"></div>       
</div>
<div id="footer-hotline">
    <div class="part">Hotline: 0800/888 888</div>
    <div class="part"><input type="submit" class="button" id="callback-button" value="callback" name="callback-button" /></div>
</div> 
<div class="f-c"></div>
<div id="footer">
    <div class="link"><div><a href="#">GTC</a></div></div>
    <div class="link"><div><a href="#">About</a></div></div>
    <div class="link"><div><a href="#">Help</a></div></div>
    <div class="link"><div><a href="#">Language</a></div></div>
</div>

感谢您的回答、建议和评论。

4

2 回答 2

1

有关更新，请参阅http://jsfiddle.net/wqBEf/1/。

值得注意的变化。

  • 我分别为浮动和文本对齐添加了left align-left和类。right align-right
  • 我将您的链接设置为，display: inline因为它是水平居中项目列表的最简单方法。

这是主要的两个变化。其余的更改只是为了支持上述两个，例如删除/添加一些边距。

于 2012-12-20T18:35:52.420 回答
0

您可以使用:first-child伪类来解决使这两个项目一起工作的问题（这仅在您一次只有两个项目时才有效）。回到 IE7也得到很好的支持

您还需要实现float:right、direction:rtl和margin-right：

#footer-hotline > .part
{
    float: right; width: 33%;
    direction: rtl;             
    margin-right: 20px;
    line-height: 50px;
    font-size: 16px;
    font-weight: bold;
}
#footer-hotline > .part:first-child
{
    direction: ltr;
    float: left;      
    margin-left: 20px;
}

Eli Gassert 的回答应该足以使导航居中

来源： http: //jsfiddle.net/YZ2Uz/
演示：http: //jsfiddle.net/YZ2Uz/show

于 2012-12-20T18:40:40.010 回答