display: flex で横並びしないです
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
以下のプログラムで、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>
どうぞよろしくお願いいたします。
-------
<!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>
ふわふわ さん
03月07日 10時02分
ふわふわさん、こんにちは。
上記のコードで試してみたところ、ひとまずWindows環境＆新しいWebブラウザでは問題無く横並びされているようです。
差し支えなければ、お使いのOSとWebブラウザ＆そのバージョンなどの情報をお教えいただけますでしょうか？
上記のコードで試してみたところ、ひとまずWindows環境＆新しいWebブラウザでは問題無く横並びされているようです。
差し支えなければ、お使いのOSとWebブラウザ＆そのバージョンなどの情報をお教えいただけますでしょうか？
馬場誠 さん
03月07日 10時29分
