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

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

ただいまの
回答率

90.50%

  • C#

    7121questions

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

  • CSS

    5801questions

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

  • C++

    3457questions

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

  • ASP.NET

    529questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 625

King_of_Flies

score 297

始めましての投稿です。

前提・実現したいこと

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

発生している問題

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

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

補足

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2017/04/11 10:53

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

    キャンセル

  • King_of_Flies

    2017/04/11 11:42 編集

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

    キャンセル

回答 3

+1

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

<table>
     <tr><th>"あああ"<span class="hoge">"いいい"</span></th></tr>
</table>
table {
    width: 90%;
}
th {
    text-align: left;
}
th > span {
    float: right;
}

動くサンプル:https://jsfiddle.net/cgukm6ka/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/11 11:38

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

    キャンセル

check解決した方法

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

.hoge{
  float: left;
  display:inline-block;
}
.fuga{
  float: right;
  display:inline-block;
}
<th><div class="hoge">あああ</div><div class="fuga">いいい</div></th>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    ccccの方の列にボタンが行かない

    ■ソース(sample.js) $(function() {     $("#test3").css({         "float":"left",         "widt

  • 解決済

    jQueryでコンテンツをスライド表示させたい!

    こんにちは。 用意させていただいた画像のように、ボタンをクリックで隠れてるコンテンツをスライドで表示させるようにしたいです。 (説明が下手なので、画像を作成してみました) 巷に

  • 解決済

    CSSに関して

    皆様、質問がございます。よろしくお願い申し上げます。 現在下記のようにRubySearchやHomeをheaderに配置したいのですが、その方法がいまいちわかりません。 そのた

  • 解決済

    Smartyフラグ判定、<div>の出し分け

    {$Member}←フラグ <div class="hoge"><a href="#" class="btn btn--hoge" title="ほげほげ"></a></div>

  • 解決済

    【html】floatしても横並びにできない

    aとbとcが横並びにできません。 原因は何でしょうか。 <div class="contents-top">          <h1>a</h1>          <div c

  • 受付中

    CSSでのリキッドレイアウトの作り方

    縦横比を固定しながらwindowサイズに追従する一般的な書き方を教えてください。 比率を保ちたいのは画像要素、divなどで囲った要素、それらを並べたときなどです。 よろしくお願

  • 解決済

    連続する特定要素ごとで子要素を入れ替えたい

    連続する特定要素の子要素を入れ替えたいです。 具体的には、連続する「hoge」ごとでその内部の「hoge_no」を「hoge_content_box」の前に移動したいです。 ■

  • 解決済

    Jsoupで複数の条件を同時に指定したい

    現在JsoupでHTMLの解析を行っているのですが Jsoupで複数の条件を同時に指定することは可能でしょうか。 例えば、 ①divタグであり、 ②divタグのclas

同じタグがついた質問を見る

  • C#

    7121questions

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

  • CSS

    5801questions

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

  • C++

    3457questions

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

  • ASP.NET

    529questions

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