Question

Jsfiddle as， https://jsfiddle.net/9qyv03u3/

如何将li字幕字符串分成两行，以便它们适合最大宽度？

在jsfiddle中，菜单项放在一行中但在firefox的50％宽度容器内，它被渲染为，

这将导致用户按错了菜单选项。所以，我更喜欢水平放置的所有菜单选项，如

   Save & Run  | Run saved |  Run selected  |
      suite    |   suite   |      tests     |

Answer 1

您可以通过将ul设为Flexbox：

来实现此目的

ul { 
  display: flex;
}

＆＃13;

ul { 
  display: flex;
  width: 20em;
  border: 4px solid gray;
  padding: 0.5em 2em;
  margin: 5em auto;
  list-style: none;
  font: 14px verdana;
}

li {
  margin: 20px 30px 10px 0;
  border-right-style: dotted;
  padding-right : 15px;
  text-align: center;
}

＆＃13;

<ul>
  <li>Save & Run suite</li>
  <li>Run saved suite</li>
  <li>Run selected tests</li>
</ul>

＆＃13;

...或将每个li设为table-cell：

li {
  display: table-cell;
}

＆＃13;

ul { 
  width: 20em;
  border: 4px solid gray;
  padding: 0.5em 2em;
  margin: 5em auto;
  list-style: none;
  font: 14px verdana;
}

li {
  display: table-cell;
  margin: 20px 30px 10px 0;
  border-right-style: dotted;
  padding-right : 15px;
  text-align: center;
}

＆＃13;

<ul>
  <li>Save & Run suite</li>
  <li>Run saved suite</li>
  <li>Run selected tests</li>
</ul>

＆＃13;

Answer 2

您可以将列表项显示为表格单元格。您可能需要稍微调整边距和填充，但这样项目将始终彼此相邻。

＆＃13;

ul{
  display: table; 
  width: 20em;
  border: 4px solid gray;
  margin: 5em auto;
  padding: 20px 0 0 0;
  list-style: None;
  height: 30px;
}

li {
  display: table-cell;
  border-right-style: dotted;
  padding-right : 15px;
}

＆＃13;

<ul>
  <li>Questions</li>
  <li>Tags liek bla blo foo bar bak nam plo and sni</li>
  <li>Users</li>
</ul>

＆＃13;

Answer 3

我建议使用CSS表。

＆＃13;

ul {
  width: 20em;
  border: 4px solid gray;
  padding: 0.5em 2em;
  margin: 5em auto;
  list-style: None;
  height: 30px;
  display: table;
  table-layout: fixed;
}
li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-right: 1px dotted black;
}

＆＃13;

<ul>
  <li>Questions & Answers</li>
  <li>Tags</li>
  <li>Users</li>
</ul>

＆＃13;

Answer 4

您还可以使用column-count属性来定义CSS列。这是一种快速简便的方法，可以达到预期的效果。

curl -X PUT "http://localhost:9200/myindex/_mymapping/list" -d '{
        "list" : {
          "properties" : {
            "name" : {
              "type": "multi_field",
              "fields": {
                  "name": {
                          "type": "string",
                          "index": "not_analyzed"
                          },
                  "name_description": {
                          "type": "string",
                          "index": "not_analyzed"
                          }
              }
            }
          }
        }
}'; echo

$my_config = $this->getDI()->get('config');
$elasticsearch_client= new Elasticsearch\Client();
$my_params['index'] = "myindex";
$my_params['type']  = "list";
$my_query["match"]["name"] = array(
    "query"=> "SOME NAME",
    "operator" => "and"
);
$my_params["body"]["query"]["filtered"] = array(
    "query"=>$my_query
);
$res = $elasticsearch_client->search($my_params);
var_dump($res);

在两行中显示li元素标题，以适应最大宽度

4 个答案: