在css中造型子弹点

Question

好吧这可能是一个愚蠢的问题，但我对这个子弹点造型很生气。 我想让它看起来像这样：

    set @cols = (select group_concat(column_name) as 'col_list' FROM `INFORMATION_SCHEMA`.`COLUMNS` WHERE (`TABLE_SCHEMA` = 'REPORTS' AND `TABLE_NAME` = 't_labor' AND column_name like '%host%'));

set @qry = concat('select ', @cols, ' from REPORTS.t_labor');

PREPARE stmt1 FROM @qry;

EXECUTE stmt1;

DEALLOCATE PREPARE stmt1;

使用此标记

 - Coffee                        - Milk                   - Milk
 - Coffee                        - Milk                   - Milk
 - Coffee                        - Milk                   - Milk

Answer 1

像这样，使用inline-block

li {
  display: inline-block;
  margin: 0;
  width: 30%;
}

<ul>
  <li>Coffee</li>
   <li>Milk</li>
  <li>Milk</li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Milk</li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Milk</li>
</ul>

可以使用flex

完成

ul {
  display: flex;
}
li {
  width: 33%;
}

<ul>
  <li>Coffee</li>
   <li>Milk</li>
  <li>Milk</li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Milk</li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Milk</li>
</ul>

Answer 2

请试试这个：

li {
  display: inline-block;
  margin: 0;
  width: 30%;
}
li:before {
content: "-";
}

Answer 3

ul {
  float:left;
  }

<ul>
  <li>Coffee</li>
   <li>Milk</li>
  <li>Milk</li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Milk</li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Milk</li>
</ul>

喜欢这个吗？

Answer 4

li {
  display: inline-block;
  width: 33%;
  margin: 0;
}    
ul {
  list-style-image: url(images/bullet.png);
}

这是一种简单的方法。