خطی نشدن li ها

سوال

سلام من یدونه div دارم که داخلش یه ul و داخل اون چنتا li هست. هر کاری کردم که بتونم این li ها رو خطی کنم نمیشه. display=inline هم کار نمیکنه. این هم کد ها:

<div id="tags">
<b>تگ ها</b>
<ul style="list-style-type:none;">
    <?php foreach($post_tags as $tag){
      echo '<a href="#" target="_self"><li class="btn tag">'.$tag.'</li></a><br>';
    ?>
</ul>
</div>
.tag{
    margin: 10px;
    width: fit-content;
    display: inline;
}
.btn{
  color: white;
  background-color: darkblue;
  padding: 10px;
  border: 0;
  cursor: pointer;
}

این جوری میشه:

عکس

حل شد 0
, 2020-01-15T13:29:48+03:30 1 پاسخ ها کاربر تازه 0

پاسخ ( 1 )

  1. احمد آخوندی
    0
    2020-01-15T23:04:10+03:30
    پاسخ

    سلام

    در کدتون چند تا مشکل داشتید:

    1. برای div آیدی تعریف کردید، ولی در Css به صورت کلاس کد نوشتید(وقتی برای تگ id میزارید، در css هم باید # شروع به نوشتن کدهای Css کنید، ولی شما . گذاشتید)
    2. همیشه تگ a رو درون تگ li بزارید(شما برعکس انجام دادید و تگ li رو درون تگ a گذاشتید)

    کد HTML:

    <div id="tags">
<ul >
      <li><a href="https://beporsam.ir/" target="_self">صفحه اصلی</a></li>
      <li><a href="https://fadev.ir" target="_self">طراحی سایت</a></li>
      <li><a href="https://beporsam.ir/blog/" target="_self">وبلاگ</a></li>
      <li><a href="https://beporsam.ir/contact_us/" target="_self">تماس با ما</a></li>
</ul>
</div>

    کد Css:

    #tags{
    margin: 10px;
    width: fit-content;
    display: inline;
}

#tags a{
	display:block;
    width:150px;
    padding:8px;
    border:#666 solid 1px;
    background-color:#030; 
    color:#FFF;   
}

#tags a:hover {
    background-color:#060;        
}

#tags ul {
    list-style-type:none;
    padding-top:0px;    
}
#tags li {
    float:right;
    position:relative;
    text-align:center;
}

#tags li ul a{
    text-align:center;
    border:0px;
    border-bottom:#666 1px solid;
}
#tags li:hover ul ul{
    display:none;
}
#tags li li:hover ul{
    display:block;
    position:absolute;
    top:10px;
    right:125px;
    z-index:1000;
}

    موفق باشید.

    بهترین پاسخ

ارسال یک پاسخ