如何在添加另一個div時使div內聯？

請看看這個鏈接快速：如何在添加另一個div時使div內聯？

http://jsfiddle.net/8grSk/

正如你可以看到文本底部對齊到頁面左側

我要添加文本的右側內嵌的文本已經存在。

這是如何完成的？

我發現很難對齊所有這些div！

謝謝你們！

詹姆斯

來源

2011-10-18 James

從'footer1'中刪除'position：absolute;'並使用'float：right;' –

使用list而不是divs似乎更好 –

您可以輕鬆地將頁腳ID內改寫一切以容納兩個區域（左和右）像這樣：

HTML

<html> 
<head> 
<link href="test.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="footer" style="position:absolute;bottom:0;"> 

<div class="left"> 
    <a href="#">About Us</a> 
    <a href="#">Accessibility</a> 
    <a href="#">Recruiters</a> 
    <a href="#">Contact Us</a> 
</div> 
<div class="right"> 
    <a href="#">About Us</a> 
    <a href="#">Accessibility</a> 
    <a href="#">Recruiters</a> 
    <a href="#">Contact Us</a> 
</div> 

</div> 

</body> 

</html>

CSS

body { 
    margin: 0; 
    padding: 0; 
} 

#footer { 
    background: #FFFFFF; 
    border: 1px solid; 
    color: #e6e6e6; 
    height: 30px; 
    width: 960px; 
    position:absolute; 
    float: left; 
    margin: 0px 0px 0px 0px; 
    padding:0; 
} 

#footer a { 
    font: 13px helvetica; 
    color: #0040FF; 
    padding: 8px 12px 3px 3px; 
} 

#footer a:hover { 
    font: 13px helvetica; 
    color: #0040FF; 
    padding: 8px 3px 3px 3px; 
    text-decoration: underline; 
} 

.right { 
    float:right; 
} 

.left { 
    float:left; 
}

演示

http://jsfiddle.net/8grSk/8/

- 編輯

改變了小提琴，以適應您的懸停狀態更好。

來源

2011-10-18 13:05:40

您應該重構HTML。相反，如果使用div，請使用無序列表<ul>，然後您可以列出您的四個鏈接並將頁腳左側的<ul>浮動。

然後用另一<ul>但是這一次浮動是正確的，瞧，一字排開的鏈接，你希望他們（我希望）

<div class="footer1"> 

    <ul id="footer-left"> 
     <li id="footer1text">About Us</li> 
     <li id="footer1text">Accessibility</li> 
     <li id="footer1text">Recruiters</li> 
     <li id="footer1text">Contact Us</li> 

    </ul> 
    <ul id="footer-right"> 
     <li id="footer1text">New Text</li> 
    </ul> 
</div>

CSS

.footer { 
    background: #FFFFFF; 
    border: 1px solid; 
    color: #e6e6e6; 
    height: 30px; 
    width: 100%; 
    position:absolute; 
    margin: 0px 0px 0px 0px; 
    padding:0; 
    display: table; 
} 

.footer1 { 
    background: #FFFFFF; 
    height: 30px; 
    width: 350px; 
    position:absolute; 
    margin: 0px 0px 0px 0px; 
    padding:0; 
} 

#footer1text { 
    font: 13px helvetica; 
    color: #0040FF; 
    padding: 8px 3px 3px 3px; 
    display: table-cell; 
} 

#footer1text:hover { 
    font: 13px helvetica; 
    color: #0040FF; 
    padding: 8px 3px 3px 3px; 
    text-decoration: underline; 
} 

#footer-left li 
{ 
    float: left; 
} 

#footer-right li 
{ 
    float: right; 
}

Working demo here :)

來源

2011-10-18 13:12:23 Kyle

如何在添加另一個div時使div內聯？

回答

相關問題