clearfix не работает в angularJs

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow"> 
 
    <li ng-repeat="user in searchUserList"> 
 
     <a href="javascript:void(0);" class="wm_clearfix3"> 
 
      <img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/> 
 
      <div class="pull-left wm_ml5"> 
 
       <div class="wm_search_uname" ng-bind="user.username"></div> 
 
       <span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span> 
 
      </div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="javascript:void(0);" class="wm_clearfix3"> 
 
      <img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/> 
 
      <div class="pull-left wm_ml5"> 
 
        <div class="wm_search_uname">fdsfsfds</div> 
 
        <span class="wm_search_uacc">fsdfds</span> 
 
      </div> 
 
     </a> 
 
    </li> 
 
</ul>

.wm_clearfix3{ 
 
    overflow: auto; 
 
    height: 1%; 
 
}

Я добавил класс CSS clearfix в моем лейбле, и он работал хорошо, когда я не добавить угловые коды в мой HTML.But, когда я добавил угловой в HTML, класс clearfix стал неработать. Вырезать картинку следующим образом:

Может быть, из-за 'нг-повтора'? Может ли кто-нибудь мне помочь?

источник

2016-06-13 Marco Sun

Вам не нужно добавлять ng-class, если вы добавляете класс с логикой. Так что просто добавьте class достаточно

источник

2016-06-13 08:46:25 DilumN

Да, ng-класс не нужен, и я изменил 'ng-class' на 'class', но clearfix все еще не работает. –

Я думаю, проблема в вашем .wm_clearfix3. Вы используете: before &: after ?? – DilumN

.wm_clearfix1 { clear: both; переполнение: скрыто; } .wm_clearfix2 { высота: 1%; } .wm_clearfix2 :: после { содержание: "."; дисплей: блок; высота: 0; ясно: both; видимость: скрытая; } .wm_clearfix3 { overflow: auto; высота: 1%; } .wm_clearfix4 { overflow: hidden; zoom: 1; } У меня есть четыре класса clearfix, и я попробовал всех. Все они отлично работали без углового. –

Зачем использовать 'ng-class', если у вас нет углового выражения? попробуйте:

ng-class="{wm_clearfix3}"

или:

.wm_clearfix3{ 
    overflow: auto; 
    height: 1%; 
    clear: both; 
}

источник

2016-06-13 08:42:24

I судимого с 'классом', а не 'нг-классом', но 'класс' не работает. –

попытайтесь вставить пустой div после тэга span, например: '

' и: '.wm_clearfix3 {clear: both; } ' –

Это также не работает. И я обновляю свои коды описания и сокращаю фотографии, возможно, вы можете увидеть проблему более четко. –

Помогло ли решение на приведенной ниже ссылке JSFiddle?

https://jsfiddle.net/6vm4csjb/

ul { 
    list-style: none; 
} 

[class*="wm_clearfix"] { 
    display: inline-block; 
    width: 100%; 
} 

[class*="wm_clearfix"]:before, [class*="wm_clearfix"]:after { 
    display: table; 
    content: " "; 
} 

img { 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
} 

.pull-left { 
    float: left; 
} 

<ul class="dropdown-menu wm_search_div" ng-show="searchDivShow"> 
    <li ng-repeat="user in searchUserList"> 
    <a href="javascript:void(0);" class="wm_clearfix3"> 
     <img ng-src="{{user.faceIcon}}" class="pull-left wm_search_uface"/> 
     <div class="pull-left wm_ml5"> 
     <div class="wm_search_uname" ng-bind="user.username"></div> 
     <span ng-bind="'账号：'+user.account" class="wm_search_uacc"></span> 
     </div> 
    </a> 
    </li> 
    <li> 
    <a href="javascript:void(0);" class="wm_clearfix3"> 
     <img ng-src="resources/images/default_faceicon.jpg" class="pull-left wm_search_uface"/> 
     <div class="pull-left wm_ml5"> 
     <div class="wm_search_uname">fdsfsfds</div> 
     <span class="wm_search_uacc">fsdfds</span> 
     </div> 
    </a> 
    </li> 
</ul>

источник

2016-06-13 10:00:53 ChronixPsyc

Я попробовал это сейчас, но это нехорошее решение. Спасибо! –

clearfix не работает в angularJs

ответ

Смежные вопросы