画像にあるログイン、ログアウトボタンを右上(インターンシップと同じ行)に持って行きたいのですが、以下のソースにするとナビバーに隠れてしまいます。
原因がわからないので、教えていただきたいです。
HTML
<html lang="ja"> <head> <meta charset="utf-8"> <title>インターン</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="copyright" content="Template Party"> <meta name="description" content="仕事を経験してから働きたい個人と働く姿を見てから採用したい企業のマッチングサービス"> <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- カスタマイズ用CSS --> <link href="css/mycss.css" rel="stylesheet"> <!-- jQuery読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- BootstrapのJS読み込み --> <script src="js/bootstrap.min.js"></script> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script type="text/javascript" src="js/openclose.js"></script> </head> <body id="top"> <div class="container"> <!--- ヘッダーここから ---> <header> <h1><a href=index.php class="logo">インターンシップ</a></h1> <h2>職業体験したい人と働く姿を見てから採用したい企業のマッチングサービス</h2> <div class="logincontainer"> <div class="header_login"> <a href="login.php" type="button" class="btn btn-primary"><?php if(!empty($_COOKIE['email'])){ echo "こんにちは。" . $_COOKIE['name'] . "さん"; }else{ echo "ログイン"; } ?></a> </div> <div class="header_logout"> <a href="logout.php" type="button" class="btn btn-danger">ログアウト</a> </div> </div> </header> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample4"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbarEexample4"> <ul class="nav navbar-nav"> <li><a href="index.php">HOME</a></li> <li><a href="firstcontact.php">初めての方</a></li> <li><a href="search.php">会社を探す</a></li> <li><a href="c_regist.php">掲載をお考えの方</a></li> <li><a href="mypage.php">マイページ</a></li> <li><a href="regist.php">新規登録</a></li> <li><a href="http://tomorrow-workstyle.com/">ブログ</a></li> <li><a href="contact.php">ご意見・お問い合わせ</a></li> </ul> </div> </div> </nav> </div><!-- ヘッダー終わり ー-->
CSS
header h2 { font-size: 16px; } .collapse a{ font-size: 1.1em; color: inherit; } @media screen and (min-width:801px) { /*PC用*/ .navbar .nav { margin: 0; display: table; width: 100%; } .navbar .nav li { display: table-cell; float: none; } .header_login { float: rightt; display: inline-block; font-size: 18px; } }/*@media screen閉じ*/ .navbar-header{ padding-top: -20px; } footer { text-align: center; background-color: #dcdcdc } #l-common-footerNav { display: inline; }
回答2件
あなたの回答
tips
プレビュー