CSSを使って文字を少し右に移動させたい（＞＜）のですが・・・・

Question

現在Ruby_on_railsを使用していますが、その中のVIEWを見栄えが良くなる様にしています
今の画面は・・・・・下記になります

未読
〇〇〇〇〇〇〇さんが あなたのブログ（dddd）にコメントしました。

2017-06-25 09:32:07 UTC

しかし・・・見栄えが悪い為少し右に文字を寄せたいと考えています

現在のVIEW(HTML）、CSSは↓な感じです
おそらくCSSの↓の記載が左いっぱいによせるようなコードになっているので
これを少し右にずらす様に変えればいいと思うのですが
どの様なコードにかえればよろしいでしょうか？
CSS,全くの初心者でググってみましたが微妙に？？？？です（＞＜）
これが影響していると思うのですが・・・・

.left {
text-align: left;
}

何卒有識者の皆さま
お知恵を拝借させていただければ幸いです
（＞＜）

VIEW(HTML)

<h2>お知らせ</h2>
<ul>
  <% @notifications.each do |notification| %>
  <hr>
    <li>
      <span><%= notification.read ? '既読' : '未読' %></span>
      <p class="left">
        <%= notification.comment.user.try(:name) %>さんが
        あなたのブログ（<%= link_to "#{notification.comment.blog.title}", blog_path(notification.comment.blog, notification_id: notification.id) %>）にコメントしました。
      </p>
      <p class="left"><%= notification.created_at %>
      </p>
    </li>
  <% end %>
</ul>

CSS

ul{
  padding: 0;
}

.child li {
  padding-top: 13px;
  border-bottom: 1px dotted #ccc;
  list-style-type: none;
}

.right {
text-align: right;
}

.left {
text-align: left;
}

Comments

[kei344]

「何を」「何に対して」｢どれくらい｣「右」なのでしょう。

[TOKUSABU]

「何を」：〇〇〇〇〇〇〇さんが あなたのブログ（dddd）にコメントしました。「何に対して」空白のない右端に対して｢どれくらい｣2cm「右」となります。PADDING？を使えばできるとググると書いてありましたが・・・・（＞＜）

[TOKUSABU]

記載が足らなかった為上記にて記載を追記させていただきました。ご指摘大変ありがとうございます！

[TOKUSABU]

ご指摘を元に今後の記載に関してもより的確にわかる様かえていこうと思います！

Answer 1

まず、CSSでは一般的に cm という単位を使いません。一番多いのが pxで、% em rem vw vh くらい覚えておけばよいです。

【<length> - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Length

次に、hr要素が ul要素直下にあるのはHTMLの文法違反です。線が引きたいだけならCSSの border を使いましょう。

【ul 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul

許可された内容 0 個以上の <li> 要素。

---

で、「空白のない右端」に「空白を作りたい」のであれば下記のように padding-right を使えばよいです。

.left {
    padding-right: 30px;
    text-align: left;
}

とりあえずCSSの入門書を買って一通り試されたほうが今後の開発がはかどると思いますよ。

Comments

[TOKUSABU]

大変丁寧な説明ありがとうございました
CSS　本を買って勉強使用と思います！