HTMLにてリストがずれて表示されてしまいます。

Question

前提・実現したいこと

始めてHTMLにてサイト作ってみてるのですが、
footer的なものを作る際に、
リストのレイアウトが崩れて表示されてしまいます。
原因がわかる方いらっしゃいませんか？

発生している問題・エラーメッセージ

  <div>
    <ul class="index">
      <li><a href="index.html">about</a></li>
      <li><a href="index.html">works</a></li>
      <li><a href="index.html">blog</a></li>
      <li><a href="index.html">contant</a></li>
    </ul>

　</div>

.index {
  text-decoration: none;
  font-size: 20px;
}

試したこと

text-decoration: none;
も聞いてくれません、なにか関係があるのでしょうか
お願いします！!

Comments

[azuapricot]

崩れるといっても、場所がずれるのか、CSSがきいていないのか、色々あるのでできればスクリーンショットをあげていただいたほうが答えやすくなるかとおもいます。

[Sohaya]

ご使用環境から質問に追記してみてください。

たとえば何を使ってサイトを作成してるのか。

WordPressでしょうか。
FC2ブログなどHTMLタグやスタイルシートが使えるサービスでしょうか。

[kei344]

HTML/CSSは前後関係で影響しあうこともあるので、なるべく省略せず提示してください。

Answer 1

text-decoration は a タグに適用しないといけません。
.index a {text-decoration: none; }

レイアウト崩れは、質問の内容だけでは答えようがありません。

(2019-01-12 追記）

憶測ですが、3列並びのレイアウトに float を使っているのが原因で崩れているのであれば、フロート解除で意図通りになるんじゃないでしょうか？

<div class="index-outer">
  <ul class="index">(略)</ul>
</div>

.index-outer {
  clear: both;
}

Answer 2

indexをどうレイアウトしたいのかがわからないのですが

.index li { display: inline } 等を指定するとリストは横並びになります。

ご希望のレイアウトと異なる場合は
その希望される具体的なレイアウトと style.cssの内容もご提示ください。

Answer 3

もしリンクの ●work などの ●も消したいのであれば

ul {
  list-style: none;
}

↑でいけます。

リンクの下線については他の方が既に答えているので割愛します。

画像の追加ありがとうございます。
確かに崩れているとは思いますが、想定しているリストの並びは横並びですか？縦並びですか？

もし横並びでしたら以下のサイトが役に立つかもしれません。
それでも改善されなければ教えてください。

改善されなかったときはCSSの親要素などの設定に原因があるかもしれないので、
CSSも一部ではなく全体を貼っていただけると幸いです。

https://m-school.biz/dev/css-coding/004-css-menu.htm