Sarlavha ikkinchi qatorga tushadi

Agar ro'yxat yorlig'ida rasm va sarlavha qo'yishga urinilsa, sarlavha ikkinchi satrga tushadi. Buni ishlashning usullari bormi?

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul {
  padding: 0;
  list-style-type: none;
}
#searchImg {
   width: 50px;
   height: 72px;
   white-space: nowrap;
   padding: 0;
   margin: 0;
}
#searchTitle {
   margin-left: 60px;
}


</div> </div>

1
Siz

kodini bilan o'zgartirishi mumkin. Ko'proq tadqiqot qilishni istasangiz, html inline ni qidirib ko'ring.

qo'shib qo'ydi muallif Ethan, manba
Marginni chap tomonga olib tashlang va displeyni qo'shing: inline-block;
qo'shib qo'ydi muallif Ivin Raj, manba
To'liq kenglikni tashkil etuvchi blok elementini ishlatasiz, shuning uchun displeydan foydalaning: blok elementi uchun inline yoki inline elementni ishlating
qo'shib qo'ydi muallif Shivkumar kondi, manba

9 javoblar

Namoyish

Buni quyidagicha foydalanib, inline qilishingiz kerak.

ul p {
  display:inline;
}

Buni sizga beradi:

enter image description here

1
qo'shib qo'ydi

to'liq kengligi ga teng bo'lgan blok elementini (p) foydalanasiz, shuning uchun blok elementidagi display: inline xususiyatidan foydalaning yoki shunchaki Inline elementlardan foydalaning

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul {
  padding: 0;
  list-style-type: none;
}

#searchImg {
  width: 50px;
  height: 72px;
  white-space: nowrap;
  padding: 0;
  margin: 0;
}

#searchTitle {
  margin-left: 60px;
}

p {
  display: inline;
}


</div> </div>

1
qo'shib qo'ydi

Buni ko'ring

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul {
  padding: 0;
  list-style-type: none;
}
ul li
{
}
#searchImg {
        width: 50px;
        height: 72px;
        white-space: nowrap;
        padding: 0;
        margin: 0;
}
#searchTitle {
        display: inline-block;
  margin-left: 60px;
}


</div> </div>

0
qo'shib qo'ydi

Rasmni rasm bilan saralash uchun display: inline-block xususiyatini ishlating.

#searchImg {
    width: 50px;
    height: 72px;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    vertical-align: middle;//align text to middle of image for better view
}
#searchTitle {
    margin-left: 60px;
    display:inline-block;
}
0
qo'shib qo'ydi

Ularni ota-onaga va jadval-hujayralariga bolalar elementlariga ko'rsatish jadvalidan foydalanib ko'ring

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>
<html>

<head>
    <title>Page Title</title>
    
</head>

<body>
    

</body>

</html>
</div> </div>

0
qo'shib qo'ydi

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul {
  padding: 0;
  list-style-type: none;
}
#searchImg {
        padding: 0;
        display:inline-block;
        vertical-align:middle;
        margin-right:10px;
}
#searchTitle {
        padding:0;
        margin:0;
        display:inline-block;
  font-size:16px;
  font-weight:bold
}


</div> </div>

0
qo'shib qo'ydi

Sizning kodingiz shkala emas: chap; img xususiyatini va p yorlig'ini bosing. Kerakli chiqishi uchun quyidagi CSS-dan foydalaning:

ul{
  padding: 0;
  list-style-type: none;
}
ul li{
  float: left;
  width: 100%;
}
#searchImg{
    width: 50px;
    height: 72px;
    white-space: nowrap;
    padding: 0;
    margin: 0;
  float: left;
}
#searchTitle{
    margin-left: 60px;
  float: left;
}
0
qo'shib qo'ydi

Follow the following code and you will have the desired result.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul {
  padding: 0;
  list-style-type: none;
}
ul li{
  width: 100%;
  float: left;
  margin-top: 5px;
}
#searchImg {
  width: 50px;
  height: 72px;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  float: left;
}
#searchTitle {
  margin-left: 60px;
  float: left;
}


</div> </div>

0
qo'shib qo'ydi
display: inline-block 

sizga yordam berishi mumkin

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul {
  padding: 0;
  list-style-type: none;
}
#searchImg {
        width: 50px;
        height: 72px;
        white-space: nowrap;
        padding: 0;
        margin: 0;
}
#searchTitle {
     margin-left: 10px;
     display: inline-block;
}


</div> </div>

0
qo'shib qo'ydi