-1
このコードでは、クラス "robin"のtext-alignプロパティが正しく動作していません。アイコンをcentre.butにしたいのは、すべて同じ行に印刷します。 。text-alignプロパティがこのコードで正しく動作していません
#good{
width: 100%;
height: 100%;
}
#vahid{
float: left;
width: 6%;
height: 100%;
background-color: #1f1f7a;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #1f1f7a ;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 25px;
width: 35px;
float: left;
margin-left: auto;
margin-right: auto;
display: block;
/* padding-left: 20px;
margin-left: auto;
margin-right: auto;*/
}
/* .local{
margin-top: 30%;
width: 100%;
text-align:center;
}*/
.local img{
display: table;
height: 1.75%;
width:20%;
margin-top: 30%;
margin-left: auto;
margin-right: auto;
/*width:20%;*/
}
/*.local img {
height: 1.75%;
width:20%;
margin :30% 0% 10% 40%;
}*/
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#button{
float:left;
margin-left: -0.8%;
width: 1.5%;
hyphens: 20%;
}
li a{
text-decoration: none;
}
.parent li{
list-style-type: none;
display: none;
text-decoration: none;
}
#bad .parent{
cursor: pointer;
font-family: sans-serif;
line-height: 200%;
}
#bad{
background-color: #1f1f7a;
width: 15%;
height: 100%;
color: white;
}
/* #bad .parent {
height: 100%;
width: 100%;
display: block;
cursor: pointer;
line-height: 3%;
height: 30px;
background: #023b3b;
color: white;
text-align: center;
}*/
#pappaya {
background-color: #1f1f7a;
width: 180%;
margin-left: -28%;
padding-left: 38%;
padding-right: 40%;
width: 50%;
/*text-align: center;
margin-right:122%;*/
}
#pappayas {
/*background-color:#339933;
width: 100%;
margin-left: -50%;
padding-left: 50%;*/
background-color:#339933;
width: 180%;
margin-left: -28%;
padding-left: 38%;
padding-right: 40%;
width: 50%;
}
#pappaya li a
{
color: white;
}
#pappayas li a
{
color: white;
}
#pappaya li:hover{
background-color: #122112;
color: white;
width: 184%;
margin-left: -75%;
padding-left: 70%;
}
#pappaya li a:hover{
color: white;
}
#pappayas li:hover{
/*text-align: center;*/
background-color: #122112;
color: white;
width: 184%;
margin-left: -75%;
padding-left: 70%;
}
#pappayas li a:hover{
color: white;
}
#bad{
padding-top: 1%;
background-color: #1f1f7a;
width: 15%;
height: 100%;
color: white;
position: absolute;
top: 0%;
display: none;
}
#bad .parent:hover
{
background-color: #122112;
color: white;
width: 78%;
}
#bad ul:hover{
background-color: #122112;}
/*#bad .parent:hover ~ .parent img{
width: 13%;
height: 3%;
}*/
/* #bad .parent:hover img{
width: 13%;
height: 3%;
}*/
#bad .parent:hover > img {
width: 18%;
height: 3%;
}
/*new setup*/
#boa{
padding-left: 5%;
height: 5%;
width: 20%;
float: left;
}
.bob{
text-indent: 200%;
margin-top: 210%;
font-size: 150%;
font-family: sans-serif;
color: white;
font-weight: bold;
}
#buttnsec{
margin-left: 94%;
width: 10%;
hyphens: 20%;
}
.boc{
text-indent: 4%;
color : bisque;
font-size: 83%;
font-family: sans-serif;
font-weight:70% ;
margin-left: 7%;
}
.parent img{
float: left;
width: 15%;
height: 3%;
margin-left: -12%;
margin-right: 20%;
}
#drop{
float:right;
height: 2%;
padding-top: 5%;
}
.render{
-webkit-filter: invert(100%); /* Safari/Chrome */
filter: invert(100%);
}
/*#bad .parent :hover{
background: #122112;
}*/
.robin{
color: white;
margin-top: 25%;
/* margin-left: 25%;
margin-right: 25%;*/
text-align: center;
}
#fizz{
margin-top: 30%;
width: 100%;
text-align:center;
}
#fizz img{
width:50%;
}
このコードでは、クラス「ロビン」のテキスト-alignプロパティが動作していないproperly.i印刷されているすべてのことのcentre.butにアイコンを作りたい：関連するCSSが
<div id="good">
<div id="vahid">
<div id="one">
<div id="fizz"><img src="image1.jpg"></div><br><br><br>
<!--<<br><br>
<br><br> br><br>-->
<!--icons-->
<!--<img class="render" src="icona.png">
<img src="iconb.png">
<img class="render" src="iconc.png">
<img class="render" src="icond.png">-->
<i class="robin fa fa-glass"> </i>
<i class="robin fa fa-th"> </i>
<i class="robin fa fa-th-large"> </i>
<i class="robin fa fa-align-justify"> </i>
<br>
<br><br><br><br>
<!--<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>-->
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--button-->
<img src="left.jpg" onclick="myFunction()" id="button">
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
同じ行に
..テキストは非常に多くの 'br'タグを使用するのではなく、.one''にALIGN又は追加適切な使用を探ります'p'タグの。 – Scott
fizzは画像のみのタグで、アイコンが始まる前に閉じています。 –