Question

我有一个无序列表，列表项水平显示。每个列表项应包含一些文本和图像。当我向他们添加内容时，列表项不再对齐。

＆＃13;

=text(importxml(...), "HH:mm")

＆＃13;

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  height: 100px;
  width: 100px;
}

＆＃13;

Jsbin：https://jsbin.com/fobopayaco/edit?html,css,output

我可以添加som css来修复此问题吗？或者我应该更改我的标记？

Answer 1

您可以将vertical-align设置为top，例如

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  vertical-align: top;
  height: 100px;
  width: 100px;
}

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>

Answer 2

通过添加文字，您可以看到默认vertical-align属性的效果：您的列表项与基线对齐。

如果您希望将它们全部对齐在同一位置，请为所有这些对象指定vertical-align属性：

li{
  border:1px solid blue;
  display:inline-block;
  height:100px;
  vertical-align: top;
  width:100px;
}

Answer 3

该列表不喜欢空项目。如果由于某种原因需要某个项目为空，请使用<li> </li>，否则一旦您向所有项目添加内容，将返回正常状态。

Answer 4

在li而不是float:left

上尝试使用display:inline-block

Answer 5

或者，您可以对float

使用left至<li>

＆＃13;

ul {
  list-style-type: none;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
li {
  border: 1px solid blue;
  display: inline-block;
  height: 100px;
  width: 100px;
  float: left;
}

＆＃13;

<ul>
  <li>222</li>
  <li></li>
  <li></li>
</ul>

＆＃13;

Answer 6

你可以在你的CSS中添加float：left或display：inline

    var myApp = angular.module('myApp', []);

myApp.controller('CartController', ['$scope', function($scope) {

}]);

myApp.directive('initiator', function($q) {
  return {

    link: function($scope, $elem, $attr) {
      var param = $attr.param;
      var deferred = $q.defer();
      var promise = deferred.promise;
      $scope.list = {};

      var labels = [];
      if (param == "A") {
        labels.push("pervii");
        labels.push("first");
      } else if (param == "X") {
        labels.push("poslednii");
        labels.push("last");
        labels.push("dernier");
      } else {
        labels.push("middle");
        labels.push("srednii");
        labels.push("moyen");
      }

      deferred.resolve(labels);
      promise.then(function(data) {
        console.log(data);
        $scope.list[param] = data;
      });

    }
  }
});

<div ng-app="myApp">
  <div ng-controller="CartController">
    <select ng-model="label3" initiator param="A">
      <option ng-repeat="lab in list['A']" >{{lab}}</option>
    </select>
  </div>
</div>

这是工作小提琴

https://jsfiddle.net/5dh2ak3a/

带有框的无序列表

6 个答案: