質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3481閲覧

floatを使ってボタンを横並びにしたい

uchida_yuma

総合スコア44

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/01/23 12:03

編集2016/01/24 11:08

画像にあるログイン、ログアウトボタンを右上(インターンシップと同じ行)に持って行きたいのですが、以下のソースにするとナビバーに隠れてしまいます。
原因がわからないので、教えていただきたいです。
トップページ
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; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

horse_n_deer

2016/01/23 18:45

スクリーンショットを見るに、bootstrapを使用していませんか?<head>の中も可能な部分は記載してください。
guest

回答2

0

ベストアンサー

イメージ説明

display:flexプロパティを使用すると<table>要素のように子要素を分断することができます。

DEMO

css

1.navigation{ 2 display: flex; 3} 4.navigation h1{ 5 flex: 1; 6} 7.navigation .logincontainer{ 8 max-width: 6em; 9}

古いブラウザを訪問者に想定している場合は、ベンダプレフィックスを参照してください。

参考

投稿2016/01/25 07:13

horse_n_deer

総合スコア452

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ログイン、ログアウトボタンのあとに

html

1<div style="clear:both"></div>

というエレメントを追加すればオッケーです

投稿2016/01/23 21:54

dshukertjr

総合スコア37

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問