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

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

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

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

C++

C++はC言語をもとにしてつくられた最もよく使われるマルチパラダイムプログラミング言語の1つです。オブジェクト指向、ジェネリック、命令型など広く対応しており、多目的に使用されています。

CSS

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

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

解決済

3回答

3487閲覧

cshtmlのインライン要素を綺麗に横並びにする。

King_of_Flies

総合スコア382

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

C++

C++はC言語をもとにしてつくられた最もよく使われるマルチパラダイムプログラミング言語の1つです。オブジェクト指向、ジェネリック、命令型など広く対応しており、多目的に使用されています。

CSS

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

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

1クリップ

投稿2017/04/11 01:34

編集2017/04/11 02:39

始めましての投稿です。

###前提・実現したいこと
cshtmlで<th>のタグ内に2つの文字列を出力し、
それぞれの文字列を左寄せ、右寄せに設定したい。
また高さをそろえることが前提とされる。

###発生している問題

<th>"あああ"<div class="hoge">"いいい"</div></th>

この実現方法でコードを入力すると、
画面表示で
「あああ
いいい」
となる。
padding,bottom,float,separateを試したが、綺麗な横並びにならない。

###補足
holizon?というのが良く分からないですが、
実現は出来ませんでした。

cssは、
.hoge{
text-align: right !important;
float:right;
}
のみ宣言してます。

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

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

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

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

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

Lhankor_Mhy

2017/04/11 01:53

thのwidthはどのように設定したいのでしょうか? 横幅が成行であれば、その画面表示*も*正しいことになりますが仕様はどうなっていますか?
King_of_Flies

2017/04/11 02:42 編集

widthではなくcolspanを使用しています。<th colspan="6">です。
guest

回答3

0

閉じタグが無いのが気になります。(省略できるものもありますが、ミスの元です)
インラインにしたかったら div要素よりspan要素でしょう。(このやり方では文字列が長くなったりテーブル幅が狭くなると崩れますが)

HTML

1<table> 2 <tr><th>"あああ"<span class="hoge">"いいい"</span></th></tr> 3</table>

CSS

1table { 2 width: 90%; 3} 4th { 5 text-align: left; 6} 7th > span { 8 float: right; 9} 10```**動くサンプル:**[https://jsfiddle.net/cgukm6ka/](https://jsfiddle.net/cgukm6ka/)

投稿2017/04/11 02:02

kei344

総合スコア69366

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

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

King_of_Flies

2017/04/11 02:38

閉じたタグの件ですが、すみませんでした。 実装のほうで、<th>"あああ"<div class="hoge">"いいい"</div></th>としています。 記述漏れですので、編集しておきます。
guest

0

自己解決

一緒に考えてくださった皆さんにはとても申し訳ないのですが、
cssの読み込みがF5更新で出来るとタカをくくっていたのが原因でした。

このcssファイルはbundleで読み込まれているため、
F5による画面更新では、設定反映がされていなかったようです。
ブラウザのキャッシュ削除をして、読み込みなおしたところ予定した表示が出来ました。

本当に申し訳ないです・・・。

投稿2017/04/11 02:45

King_of_Flies

総合スコア382

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

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

0

inline-blockとfloatを使うのはいかがでしょうか。

css

1.hoge{ 2 float: left; 3 display:inline-block; 4} 5.fuga{ 6 float: right; 7 display:inline-block; 8}

html

1<th><div class="hoge">あああ</div><div class="fuga">いいい</div></th>

投稿2017/04/11 02:06

Clor

総合スコア883

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問