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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

解決済

3回答

1606閲覧

CSS で、 width:50vw とすると、aタグが二段になってしまう。

ryuto.nakamura

総合スコア60

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2019/03/30 02:22

width: 50vw とすると、一行に 収まりきらなくなってしまう

ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題

aタグを二つ並べ、それぞれ

CSS

1width : 50vw;

としているのですが、二つのaタグが横並びになってくれません。

該当のソースコード(短縮版)

HTML

1<!DOQTYPE html> 2<html> 3 <head> 4 (省略) 5 </head> 6 <body> 7 <a href="#">自己紹介</a> 8 <a href="#">依頼受付</a> 9 </body>

CSS

1//実際にはここにHTML5 Doctor Reset CSS(初期化するコード)があります 2 3a{ 4 display: inline-block; 5 width: 50vw; 6}

試したこと

width: 49vw;

とする => 成功

### 補足情報
CSSは、
HTML5 Doctor Reset CSS (http://html5doctor.com/html-5-reset-stylesheet/)
を使用して初期化しています

また、初質問なので、わかりにくいところなどありましたら、指摘していただけると幸いです。
単純なことだと思いますが、回答よろしくお願いします。

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

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

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

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

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

guest

回答3

0

すでに終わっていますが、flex の例を挙げておきます。

CSS

1body { 2 display: flex; 3} 4 5body > * { 6 flex: 1; 7}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

投稿2019/04/03 00:50

x_x

総合スコア13749

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

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

0

ベストアンサー

改行分の横幅が邪魔になり、2段になります。

①改行をコメントアウトする

<a href="#">自己紹介</a><!-- --><a href="#">依頼受付</a>

②aタグの親要素でテキストの横幅をなくす

<div style="letter-spacing:-0.4em;"> <a href="#" style="letter-spacing:normal;">自己紹介</a> <a href="#" style="letter-spacing:normal;">依頼受付</a> </div>

もちろん、インラインの記述じゃなくてもよいです。

投稿2019/03/30 02:31

108_tw

総合スコア20

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

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

ryuto.nakamura

2019/03/30 03:19

回答ありがとうございます。 ①の方法でできました
guest

0

投稿2019/03/30 02:30

編集2019/03/30 02:33
mypt

総合スコア170

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

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

ryuto.nakamura

2019/03/30 03:19

回答ありがとうございます。もう少し自分で調べるべきでしたね、、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問