サーバーサイドによる、cssのズレ

twitterのような簡易アプリを作成しています。

#やりたい内容
コメント機能の所で、ツイートに対して、コメントボタンを押すとコメントへ遷移されます。
そこで、そのツイートがログインしていたら編集ボタンが現れて、ログインしていないツイートだと編集ボタンは無くします。
それは何とか実装出来ました。
問題はその後です。
現時点でログインしているユーザーのツイートは編集ボタンがあって、ログインしていないツイートに対しては編集ボタンがない状態です。
編集ボタンの下辺りにツイートした時間が記述しています。
cssで編集ボタンの置きたい位置を合わして、時間も合わせました。
そして、自分のアカウントではない編集ボタンがないツイートを見ると時間の位置ズレているんです。
サーバーサイドによってcssのズレはサーバーサイドの問題より、cssの問題でしょうか？

#試した内容
位置を固定させる

position: fixed;

を使ってみたら編集ボタンがどこかに行ったりして余計分かりませんでした。
編集ボタンの位置移動には

position: relative;
bottom: 52px;

を使っています。
これらが邪魔して、時間の位置がズレてしまったのかなぁと考えました。
margin-bottomが効かなかったのでpositionを使いました。

アプリは載せることが出来ないので、文章だけでは伝わりにくいかもしれませんが、
こう言う時はどう調整したらいいのでしょうか？
よろしくお願いします。

#補足

.tweets  
  .user  
    user name
  .messa
    tweet text
  - if user_signed_in? && current_user.id == @tweet.user_id
    = link_to "編集", "#", method: :get, class: "edit"
  .time
    = @tweet.created_at.strftime("%Y/%m/%d %H:%M")

.edit {
  border: solid 1px red;
  position: relative;
  bottom: 52px;
  margin-left: 300px;
  font-size: 15px;
}
.time {
  padding-left: 300px;
  font-size: 15px;
  margin-top: 36px;
}

これで大丈夫でしょうか？
修正依頼ありがとうございます。
よろしくお願いします。

hatena19

2020/02/05 07:09

編集ボタンと時間の部分のhtmlとcssだけでも提示できませんか。こちらで再現できるコードがないと回答は難しいかと。

hatena19

2020/02/05 07:31

ページに出力されたhtmlも提示してもらえるとより回答しやすいです。

行動規範の内容に同意します

回答1件

ベストアンサー

根本的に、CSS を解釈して表示をコントロールしているのは、Web ブラウザです。サーバは関知していません。

ログイン中でないと編集のリンク自体がないのですから、ログインしているときとしていないときでは .edit の CSS に対応するもの自体が存在しないわけで、それが「margin-left: 300px;」分存在しなくなるのと同義ですから、そりゃずれますね。

※そもそも link_to （a タグですかね）で幅をコントロールしてしまうから問題なのです

投稿2020/02/07 05:39

tacsheaven

総合スコア13703

yume0409

2020/02/07 08:22

回答ありがとうございます。無事、解決しましたが、こう言う場合にposition: relative;を使うのでしょうか？今までposition: relative;の使い方はなんとなく分かっていましたが、どう言った場合に使うなど・・・使い方をネットで調べてもよく分からなかったのです。marginとpaddingが効かなかった場合に使用していました。