Question

请帮忙。我希望实现该文本和黄色框上的按钮左右对齐（左侧文本 - 边距20像素;右侧按钮 - 边距20像素）和页脚与黄色框对齐的菜单。

我无法添加图片，抱歉。

编辑：添加了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>

Thanx获得答案，建议和评论。

Answer 1

请参阅http://jsfiddle.net/wqBEf/1/了解更新。

值得注意的变化。

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

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

Answer 2

您可以使用:first-child伪类来解决让两个项目一起工作的问题（只有在任何时候只有两个项目时才会有效）。它也得到了很好的支持going back to 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's回答应该足以使导航中心

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

css html布局与divs和同一个类

2 个答案: