[
[返信する]]
1行で左寄せと右寄せしたいがずれてしまいます。
by abcd
2020-07-10 18:05
小説機能の一覧画面で章を使って
章タイトル …ページ番号
のように1行で左寄せと右寄せを使いたいと思い、cssでfloatを使えばいいというところは分かりました。
そこでcssとタイトルの左右を以下のようにしました。
css
.left{
float:left;
}
.right{
text-align:right;
}
.right:before{
content:"…… ";
}
章の一覧でのタイトル左
<div><p class="left">
章の一覧でのタイトル右
</p><p class="right">数字</p>
一覧レイアウト
<p><a href="#dream_url#">Name_Change</a></p>#list##prev_＊_# #next_＃_#
#page_noveltop#
タイトルの右側に数字がくるという形には出来たのですが、次は1行に収まっていない問題が発生しました。
----------------------------------
…数字
章タイトル
----------------------------------
とずれてしまいます。
ホームページと小説のそれぞれの設定で改行は「する」にしています。タイトル左右で改行をしていないか確認しましたが改行はありませんでした。
解決策や他にいい方法などありましたら教えてください。よろしくお願いいたします。
pc
[編集]
by 匿名
2020-07-10 22:12
floatではなくinline-blockを使ってはいかがでしょう。公式テンプレに下記を追記したところうまく表示されました。(タイトル左右は書き出されているままです)
.left{
/*float:left;*/
display:inline-block;
width:50%;
text-align:left;
background:#fcc;
}
.right{
display:inline-block;
width:50%;
text-align:right;
background:#f99;
}
.right:before{
content:"…… ";
display:inline-block;
background:#0cc;
}
各部分が分かりやすいように背景色をつけていますので確認後はbackground〜の行を削除してください。
ちなみに書き出されているタイトル左右だと<div>が閉じられていないのでタグミスになります。(inline-blockを使うなら<div>は不要です)
pc
[編集]
by abcd
2020-07-12 00:23
inlineblockで希望の形に出来ました。ありがとうございました！
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2020-07-10 18:05
pc
戻る
]