【CSS】 【HTML】 ヘッダー部分のログインボタンをきれいに並べたい【レイアウト崩れ】

Question

よろしくお願いいたします。
現在、webページを作っているのですが、ヘッダーの部分の一部レイアウトが崩れうまくいきません。
レイアウトは、「header」の中に<div class="container">、その中に<div class="header-left">と<div class="header-right">を
配置しており**、本質問は<div class="header-right">について**です。

本来、下記画像のように「ログイン」と「新規登録」を並べたいのですが、

私の書いたソースでは以下のようになってしまいます。

「ログイン」と「新規登録」を、お手本の画像のような位置具合で、きれいにサイズを揃えて並べるにはどのような記述を追加すればよろしいでしょうか。
私の書いているコードは下記です。
ご覧頂いてお知恵を頂ければ幸いです。

<!--  html-->
<header>
・
・
・
<div class="header-right">
	<div class="entry-wrapper">
			<a href="#" class="link login">ログイン</a>
			<a href="#" class="link sign-up">新規登録</a>
	</div>
</div>
 
 <!--  css-->
 
 .entry-wrapper{
	width:400px;
}

.link{
	height:35px
	width:180px;
}

.sign-up{   <!--  新規登録-->
	margin-left:20px;
	background-color:white;
	float:right;
}

.login{    <!--  ログイン-->
	margin-left:20px;
	background-color:white;
}	
	

有職者の皆様、ご教示の程よろしくお願いいたします。

Answer 1

inline要素には幅や高さが効きません。
aタグは「display:inline;」がデフォルト値なので、まずは「display:inline-block;」と変えてあげましょう。

.link{
    display: inline-block; /* 追加 */
    height: 35px; /* ←セミコロンが抜けてます */
    width: 180px;
}

Comments

[nekomura]

WanOOOOOO様

ありがとうございます。
早速試したところ、お手本のようにうまく配置する事ができました！

Answer 2

.link{
    height:35px
    width:180px;
}

height:35pxの後ろにセミコロンが無い。

それとaタグはインライン要素なので、縦幅は指定できなかったはずです。
ブロック要素でくくるか、display:blockを追加してください。

Comments

[nekomura]

chiro.0519様
>aタグはインライン要素なので、縦幅は指定できなかったはず
すっかり忘れていました…。
おかげさまで、うまくいきました！
全ご回答がほぼ同じ内容でしたので、今回はご回答いただいた順でベストアンサーを決めさせていただきました。
今後もまたご教示頂ければ幸いです。
ありがとうございました！

[kaz.Suenaga]

横槍すみません。
解決済みですし今回のお話には直接的に関係ないのですが、HTML5ではインライン要素、ブロック要素、という概念がなくなっています。
参考） http://webcre8.jp/think/html5-block-inline.html

なので

- aタグはインライン要素

という解釈は間違いで、

- 多くのブラウザのCSSのデフォルト値でaタグのdisplay属性はinline

という解釈が適切な状態になっています。
当然 aタグに限らず全てのタグについてこういった解釈になります。

余談でした。