0

CSS を使用した経験があまりないため、CSS を使用してメニューの横にリンクを取得しようとしています。現在、リンクはメニューの左下にあります。メニューとリンクのコードは次のとおりです。

<div id="content">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="kwicks.js"></script>
<script type="text/javascript" src="custom.js"></script>
</head>  
<body>  
<ul class="kwicks">  
  <li id="kwick1"><a href="index.php">Home</a></li>  
  <li id="kwick2"><a href="klanten.php">Klanten</a></li>  
  <li id="kwick3"><a href="nieuwsbrieven.php">Nieuwsbrieven</a></li>  
  <li id="kwick4"><a href="subscriptions.php?page=1">Subscriptions</a></li>  
</ul>
<A href='logout.php'>Logout</A>
</div>

これは次のように表示されます。

ここに画像の説明を入力

私が取得したいのはこれです：

ここに画像の説明を入力

私はそれをdivに入れて、次のように整列しようとしました:

<div class="right">
 <A href='logout.php'>Logout</A>
</div>

CSS:

.right {
text-align: right;
float: right;
}

ただし、これはリンクをメニューの右下に配置するだけです。これはおそらく多くの人にとって簡単なことですが、私はそれを機能させることができません. 誰かがそれを正しくする方法を教えてくれたら、それは素晴らしいことです!

4

5 に答える 5

3

あなたがスタイルを提供していないので、私はゼロから作成しました。明らかにあなたのもののようには見えませんが、そこに同じロジックを適用できます.メニューを左にフロートすると、右側とあなたのスペースが空になります. div は上に移動し、フローティング メニューの横に配置されます。メニューをページの中央に配置している場合に備えて、ラッパーを用意しました。メニューが中央に配置されていない場合は必要ありません。

デモ

<div class="holder">
    <ul>
        <li>Home</li>
        <li>Menu</li>
    </ul>
    <div>Logout</div>
</div>

.holder {
    width: 150px;
    margin: auto;
}

ul {
    float: left;
}

ul li {
    display: inline-block;
    margin-right: 5px;
}

注: 左に向かってメニューをフローティングしているので、フロートをクリアすることを忘れないでください

于 2013-05-17T07:35:21.373 に答える
1

唯一無二の解決策はないと思います。とを a の中に入れて、<ul>インラインで表示されるようにスタイルを設定します。<a><div><ul>

<ul class="kwicks" style="display: inline;">

これは、<ul>タグのデフォルトの動作がブロックで表示されるためです。この動作を変更しない限り、ブロック以外のものを表示することはできません。

于 2013-05-17T07:39:05.143 に答える
1

代わりに使用display:inlineします。

<a href='logout.php' style="display:inline; float:left;">Logout</a>
于 2013-05-17T07:34:20.337 に答える
0

DIV を UL の前に移動すると、正しくフロートするはずです

于 2013-05-17T07:33:23.497 に答える
0

これを試して 

<ul class="kwicks">  
  <li id="kwick1"><a href="index.php">Home</a></li>  
  <li id="kwick2"><a href="klanten.php">Klanten</a></li>  
  <li id="kwick3"><a href="nieuwsbrieven.php">Nieuwsbrieven</a></li>  
  <li id="kwick4"><a href="subscriptions.php?page=1">Subscriptions</a></li>
  <li class="right"><A href='logout.php'>Logout</A></li>
</ul>
于 2013-05-17T07:39:41.550 に答える