2017-03-21 3 views
-1

ログインしたときのユーザー名をエコーするログアウトリンクがあります。およびログアウト。例として、 "ilikepizza |ログアウト"があります。しかし、リンクの周りのdivがユーザー名の幅に反応するようにしたいと思います。だから誰かが長いユーザ名を持っていたら、それは自動的にDIV内に収まります。DIVはユーザー名の長さに応答します

ここでは、コード(CSSが含まれています)です:

<?php 
 
session_start(); 
 
$username = $_SESSION["username"]; 
 
?> 
 
<html> 
 
<head> 
 
\t <link rel="shortcut icon" href="pictures/vinyl_gb_vinyl-600x600.png"/> 
 
\t <title> 
 
\t \t website.com 
 
\t </title> 
 
<link href="style.css" rel="stylesheet"> 
 
\t <style> 
 
\t b { font-weight: bold; } 
 
    BODY { background-image: url(pictures/background.jpg); background-repeat: no-repeat; } 
 
\t a {color: white; font-family: Geosans; text-decoration:none;} 
 
\t \t .loggedin{ width: 9vw; 
 
\t \t background-color: #333; 
 
\t \t border-radius: 5px; 
 
\t \t margin: 0; 
 
\t \t margin-bottom: 5px; 
 
\t \t } 
 
\t \t .loggedin:hover {background-color: #111;} 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t </style> 
 
</head> 
 
<body> 
 
\t \t <?php 
 
\t \t  session_start(); 
 
\t \t \t \t if (isset($_SESSION['username'])){ 
 
\t \t \t \t \t echo '<div class="loggedin">'; 
 
\t \t \t \t \t echo '<a href="Jukebox/logout.php">'; 
 
\t \t \t \t \t $username = $_SESSION['username']; 
 
\t \t \t \t \t $username = $_SESSION['username']; 
 
\t \t \t \t \t echo $username; 
 
\t \t \t \t \t echo '&nbsp;&nbsp;|&nbsp;&nbsp;Log out</a>'; 
 
\t \t \t \t  echo '</div>'; 
 
\t \t \t \t } 
 
\t  else{ 
 
     echo ''; 
 
\t \t \t \t } 
 
\t \t \t \t ?>

誰もがこれを行う方法を知っていますか?私は複数のものを試しましたが、サイコロはありませんでした。 EDIT:これを実行しないと、ログインしているユーザーが登録されていません。コードを表示するためにのみ使用しました。

+0

ブロックを浮かせるか、幅を設定する代わりにブロックをインラインブロックにします。 – jeroen

+0

私は 'display:inline-block'を設定しようとしましたが、それは悪化させました。 –

+1

回答が多すぎる可能性があります。あなたの例では、ほとんどのHTMLが見つからないと思います。あなたはjsfiddleの例を挙げることができますか? – Oliver

答えて

0

.loggedinのCSSのwidthプロパティを削除する必要があります。これはオブジェクトに静的な幅を与えます。

.loggedin { 
    /* width: 9vw; Don't set a static width */ 
    background-color: #333; 
    border-radius: 5px; 
    margin: 0; 
    margin-bottom: 5px; 
} 
+0

私はそれが一時的な解決策であることを知っています。 –

+0

静的な幅なしで動作するはずです。あなたはwidthプロパティなしで結果が何であるかのスクリーンショットを投稿できますか?そうすれば、正確に何が起こっているのかがわかります。 – Jerodev

+2

display:inline-blockを追加します。したがって、コンテンツに適合しますが、依然としてブロックされた要素の特性があります。最後に、親要素に依存します。私は良い答えを与えるために、ほとんどのHTMLがMaartenの例ではないと思います。 – Oliver

関連する問題