1
デスクトップビューで5つのdivを並べて表示します。 私はこれを達成するために "display：block-inline"を使用しました。モバイルビューのdivを垂直に整列する
私のモバイルビューでは、メディアクエリを使用してディスプレイを「display：block」に設定して、モバイルデバイスで垂直に並べるようにしました。
しかし、モバイルビューに切り替えると、divが縦に並べて表示されますが、デスクトップビューにあるスタイリングが失われています。背景色とテキスト色と同じです。
なぜこれが起こっているのか分かりません。
ご協力いただければ幸いです。
PS：私は、彼らがモバイルビューでデバイスの全幅を適用するように、どのようにdiv要素の幅を制御するためにブートストラップ
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222222;
}
li {
float: left;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #F98900;
}
nav[role="sub"] ul {
background-color: #525252;
}
nav[role="sub"] li a:hover {
text-decoration: underline;
background: #525252;
color: #F98900;
}
nav[role="main"] ul {
background-color: #222222;
}
.block {
display: inline-block;
}
.mml
/*manual margin to left */
{
margin-left: 2%;
}
.dailystatus {
color: #ABABA7;
background-color: #343434;
}
.mpl {
padding-left: 4em;
}
@media(max-width:500px) {
.mpl {
padding-left: 1em;
}
.mmt {
margin-top: 1em;
}
.block2 {
display: block;
}
}
.width {
width: 15%;
}<div class="mml">
<p> Your task view all</p>
<div class="width block dailystatus block2">
<p>Follow Up 05:30pm</p>
<p>Ashwin Kumar</p>
<p>Brigade Group</p>
<p>Contact</p>
<p>[email protected]</p>
<p>+91 8965238745</p>
<p>City</p>
<p>Bangalore</p>
<p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
</p>
<p></p>
</div>
<div class="width block mml dailystatus block2">
<p>Follow Up 05:30pm</p>
<p>Ashwin Kumar</p>
<p>Brigade Group</p>
<p>Contact</p>
<p>[email protected]</p>
<p>+91 8965238745</p>
<p>City</p>
<p>Bangalore</p>
<p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
</p>
<p></p>
</div>
<div class="width block mml dailystatus block2">
<p>Follow Up 05:30pm</p>
<p>Ashwin Kumar</p>
<p>Brigade Group</p>
<p>Contact</p>
<p>[email protected]</p>
<p>+91 8965238745</p>
<p>City</p>
<p>Bangalore</p>
<p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
</p>
<p></p>
</div>
<div class="width block mml dailystatus block2">
<p>Follow Up 05:30pm</p>
<p>Ashwin Kumar</p>
<p>Brigade Group</p>
<p>Contact</p>
<p>[email protected]</p>
<p>+91 8965238745</p>
<p>City</p>
<p>Bangalore</p>
<p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
</p>
<p></p>
</div>
<div class="width block mml dailystatus block2">
<p>Follow Up 05:30pm</p>
<p>Ashwin Kumar</p>
<p>Brigade Group</p>
<p>Contact</p>
<p>[email protected]</p>
<p>+91 8965238745</p>
<p>City</p>
<p>Bangalore</p>
<p>Lorem ipsum dolor sit amet, no sea altera primis blandit, id nam cibo labitur. In iuvaret bonorum argumentum eum
</p>
<p></p>
</div>
</div>を使用しない義務を持っている
あなたのコード（HTMLやCSS）を共有することができれば、我々は助けることができるかもしれません。 – Gerard