Bo'lim qutidagi elementlar ro'yxatini joylashtiring

Men HTML va CSS uchun yangi. Men hozirgi vaqtda menda (Tartibga solish | O'chirish | Ko'rib | Sinov Take) elementlar ro'yxatini mening div xonasiga kiritishga harakat qilaman, lekin nima uchun u har doim qutining tashqarisida ekanligini tushunolmadim.

enter image description here

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

.action-container {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: white;
  border: 1px solid rgba(74, 74, 74, 0.075);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  color: #204056;
  text-align: left;
  font-size: 18px;
  font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}

#menu>li.sub ul {
  position: absolute;
  left: 0px;
  float: right;
}

#menu li.sub ul li a {
  display: inline;
}

#menu {
  text-align: right;
}

li {
  display: inline-block;
}
<div class="action-container">
  
Test 1

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

Tartibga solish: Test1 va (Tartibga solish | O'chirish - Ko'rib chiqish - Sinovni oling) bir xil satrda bo'lishini xohlayman

0
Rahmat. Ularni bir xil yo'nalishda qanday qilish kerak? Balandlikni ko'targaningizdan so'ng, ro'yxat "Sinov 1" ning ostidadir.
qo'shib qo'ydi muallif stackyyflow, manba
Iltimos, balandlikni olib tashlang: 70px;
qo'shib qo'ydi muallif Manish Jesani, manba
Iltimos, mening javobimga qarang.
qo'shib qo'ydi muallif Manish Jesani, manba

6 javoblar

You can use display: flex; with justify-content: space-between;

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

.action-container {
  margin-bottom: 20px;
  background: white;
  border: 1px solid rgba(74, 74, 74, 0.075);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  color: #204056;
  font-size: 18px;
  font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
  display: flex;
  justify-content: space-between;
  padding: 1em;
}

#menu, .action-container p {
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="action-container">
  
Test 1

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

3
qo'shib qo'ydi
Super Sir Sizning javobingizni yoqtiradi @Michael Coker
qo'shib qo'ydi muallif Ivin Raj, manba

height: auto ni o'rnatish va p uchun uslubni float: Left ga o'zgartirish kerak.

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

.action-container {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(74, 74, 74, 0.075);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  color: #204056;
  text-align: left;
  font-size: 18px;
  font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}

.action-container p {
  float: left;
  max-width: 70%;
}

#menu>li.sub ul {
  position: absolute;
  left: 0px;
  float: right;
}

#menu li.sub ul li a {
  display: inline;
}

#menu {
  text-align: right;
  padding-right: 10px;
}

li {
  display: inline-block;
}
<div class="action-container">
  
Test 1

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

2
qo'shib qo'ydi

Iltimos, harakat qilib ko'ring.

HTML

<div class="action-container">
       
Test 1

  </div>

CSS

.action-container {
    display:inline-block;
    padding-left: 20px;
    margin-bottom: 20px;
    width: 100%;
    line-height: 70px;
    background: white;
    border: 1px solid rgba(74,74,74,0.075);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    color: #204056;
    text-align: left;
    font-size: 18px;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}
.action-container p { float: left;width: 70%; }
#menu > li.sub ul {
    position: absolute;
    left: 0px;
    float: right;
}

#menu li.sub ul li a {
    display: inline;
}

#menu{
   float: right;
margin-right: 10px;
}

li{
    display:inline-block;
}
1
qo'shib qo'ydi

Masalan, p tag tufayli quyidagi misolni ko'ring,

Misol - 1

fon yorlig'i ga p tag -ga topshirdim va to'liq kenglik ni olganini ko'rasiz, chunki siz matnni align left ota-div ichida ul va float to o'ngga ga o'tish uchun, float ni ham p tagiga yozing.

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

.action-container {
    display:inline-block;
    padding-left: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: white;
    border: 1px solid rgba(74,74,74,0.075);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    color: #204056;
    text-align: left;
    font-size: 18px;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}
.action-container  > p{
  background:#ccc;
}
#menu > li.sub ul {
    position: absolute;
    left: 0px;
    float: right;
}

#menu li.sub ul li a {
    display: inline;
}

#menu{
    text-align:right;
}

li{
    display:inline-block;
}
<div class="action-container">
       
Test 1

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

Example - 2 Output after adding float to p tag,

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

.action-container {
    display:inline-block;
    padding-left: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: white;
    border: 1px solid rgba(74,74,74,0.075);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    color: #204056;
    text-align: left;
    font-size: 18px;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}
.action-container  > p{
  float:left;
}
#menu > li.sub ul {
    position: absolute;
    left: 0px;
    float: right;
}

#menu li.sub ul li a {
    display: inline;
}

#menu{
    text-align:right;
}

li{
    display:inline-block;
}
<div class="action-container">
       
Test 1

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

1
qo'shib qo'ydi
@stackyyflow Ushbu ishlarga umid qilaman.
qo'shib qo'ydi muallif frnt, manba

Inline-blokni jadvalga o'zgartiring. U ishlaydi. Nimani bilmayman, lekin loyihalarimda juda ko'p foydalanaman.

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

.action-container {
    display:table;
    padding-left: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: white;
    border: 1px solid rgba(74,74,74,0.075);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    color: #204056;
    text-align: left;
    font-size: 18px;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}

#menu > li.sub ul {
    position: absolute;
    left: 0px;
    float: right;
}

#menu li.sub ul li a {
    display: inline;
}

#menu{
    text-align:right;
}

li{
    display:inline-block;
}
<div class="action-container">
  
Test 1

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

1
qo'shib qo'ydi

Siz shunchaki tovar belgisiga o'xshash matnni chapga surishingiz kerak


Test 1

1
qo'shib qo'ydi