前提・実現したいこと
liに記載した数字を横並びにしたいです。
発生している問題・エラーメッセージ
縦並びのままです。
該当のソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Advanced-tec co.</title> <style type="text/css"> body { margin: 0px; padding: 0px; background-color: #ff4500; } ul { display: flex; width: 100%; margin: 50px auto; padding: 0; background-color: #ff4500; border: 1px solid #ff4500; } li{ width: 8%; padding: 40px 0; text-align: center; background-color: #ff4500; border: 1px solid #000000; color: #000000; list-style: none; } </style> </head> <body> <img src="img/haikei.jpg" alt="背景" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>試したこと
本やネットで調べました。
補足情報(FW/ツールのバージョンなど)
Dreamweaverを使っています。
HTML・CSSの各コードはそれぞれをコードブロックにすると、検証しやすくなり、回答もつきやすくなるかと思います。
>liに記載した数字を横並びにしたいです。 → 提示のコードでは横並びになっています。
ご提示のコードを試しましたが、当方の環境では横並びになり、「横並びにならない」という問題は発生しませんでした。
ご提示いただいていない部分のコードに原因があると思いますので、質問者が動かして実際に問題が再現するコードをご提示ください。また、コードは
```css
body{}
```
```html
<body>
```
のように、Markdownを使って書いてください。
横並びになるのでキャッシュクリアしてみてください。
それでも横並びにはなりませんか?
キャッシュクリア方法:F12を押してデベロッパーツールを開く→更新ボタン右クリック→キャッシュの消去とハードの再読込
早速のコメントまことにありがとうございます!
今までDreamweaverで表示確認していたのですが、教えて頂いたとおりブラウザ上にindex.htmlをドラッグしたところ正しく表示されました。
ありがとうございました!!
解決されたのであれば、自己回答も「投稿」「ベストアンサーに選ぶ」ことも出来ますので、解決に至った経緯を回答として投稿し、ベストアンサーに選び、質問を「解決済」にしてください。
回答1件
あなたの回答
tips
プレビュー