はすぐにこのリンクをチェックしてくださいすでに存在しているテキストとインラインでページが並んでいます。別のdivを追加するときにdivをインラインにする方法は？底部は</p> <p>は私がの右側にテキストを追加したいページの左側に整列されるテキストを見ることができるように</p> <p><a href="http://jsfiddle.net/8grSk/" rel="nofollow">http://jsfiddle.net/8grSk/</a></p> <p>：
これはどのように行われますか？
私はこれらのdivをすべて整列するのが難しいと感じています！
ありがとうございました！
ジェームズ
：
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;
}
デモ
-
を編集するには、より良いあなたのホバー状態に対処するためにフィドルを変更しました。
HTMLをリファクタリングする必要があります。代わりにdivを使用する場合は、順序なしリスト<ul>を使用して、4つのリンクをリストし、<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;
}
'footer1'から' position：absolute; 'を削除し、' float：right; 'を使用してください。 –
divの代わりにリストを使うと良いでしょう –