خطی نشدن li ها

سوال

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

کد HTML و PHP
PHP
۱
۲
۳
۴
۵
۶
۷
۸
<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>

کد CSS
CSS
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
.tag{
    margin: ۱۰px;
    width: fit-content;
    display: inline;
}
.btn{
  color: white;
  background-color: darkblue;
  padding: ۱۰px;
  border: ۰;
  cursor: pointer;
}

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

عکس

حل شد 0
, ۱۳۹۸/۱۰/۲۵ ۱۳:۲۹:۴۸ 1 پاسخ ها کاربر تازه 0

پاسخ ( 1 )

  1. احمد آخوندی
    0
    ۱۳۹۸/۱۰/۲۵ ۲۳:۰۴:۱۰
    پاسخ

    سلام

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

    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: ۱۰px;
        width: fit-content;
        display: inline;
    }
     
    #tags a{
    display:block;
        width:۱۵۰px;
        padding:۸px;
        border:#۶۶۶ solid 1px;
        background-color:#۰۳۰;
        color:#FFF;  
    }
     
    #tags a:hover {
        background-color:#۰۶۰;        
    }
     
    #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:#۶۶۶ ۱px solid;
    }
    #tags li:hover ul ul{
        display:none;
    }
    #tags li li:hover ul{
        display:block;
        position:absolute;
        top:۱۰px;
        right:۱۲۵px;
        z-index:۱۰۰۰;
    }

    موفق باشید.

    بهترین پاسخ

ارسال یک پاسخ