如何使用 css 为任何屏幕自动在全宽菜单中拉伸菜单项

Question

我有一些菜单项必须全宽自动拉伸 menu.How 是任何类型的屏幕自动拉伸的最佳方式 css?

我试过了

.report_types_section ul li {
 position: relative;
display: inline-block;
width: auto;
}.report_types_section ul li a {
 float: left;
text-decoration: none;
 color: #74a9d4;
font-size: 18px;
display: block;
text-align: center;
 width: 100%;
padding-left: 15px;
padding-right: 35px;
text-transform: uppercase;
}.report_types_section ul li a:after {
 content: " | ";
color: #74a9d4;
font-size: 18px;
float: right;
padding-left: 23px;
 position: absolute;
}

但是对于这里的任何屏幕，我都需要增加填充，但这并不好。

Answer 1

在没有提供任何标记的情况下 - 我做了一些推论 - 你希望实现的可以与 CSS 表一起使用（在没有对 flexbox 的更大支持的情况下）

html,
body {
  width: 100%;
  margin: 0;
}
ul,
li {
  padding: 0;
  margin: 0;
}
.report_types_section ul {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.report_types_section ul li {
  display: table-cell;
}
.report_types_section ul li:not(:last-of-type) {
  border-right: 1px solid #74a9d4;
}
.report_types_section ul li a {
  text-decoration: none;
  color: #74a9d4;
  white-space:nowrap;
  font-size: 18px;
  display: block;
  text-align: center;
  text-transform: uppercase;
}

<div class="report_types_section">
  <ul>
    <li><a href="#">Menu Item</a>
    </li>
    <li><a href="#">Menu Item</a>
    </li>
    <li><a href="#">Menu Item</a>
    </li>
    <li><a href="#">Menu Item</a>
    </li>
  </ul>

</div>

您还可以将 white-space: nowrap; 应用于子 a 以防止换行。

Answer 2

如果您知道那里有多少项目，您可以使用具有百分比宽度的列。例如 6 个元素 - 100% / 6

.report_types_section ul li {
    display: inline-block;
    width: 16.6%;
    float: left;
}

DEMO 在这里 http://jsfiddle.net/mattydsw/hzy5Lr49/

编辑

我没有比使用 table 布局并添加空单元格作为间隔单元格更好的主意了。我还在空单元格中放置了一个管道 | 并将其居中以模拟边框。

http://jsfiddle.net/mattydsw/hzy5Lr49/2/

Answer 3

终于找到了空格的解决方法。

Fiddle

.report_types_section ul {
  list-style-type: none;
  float: left;
  width: 64%;
    padding:0;
    margin:0;
}
.report_types_section ul li:first-child {
  text-align: left;
}
.report_types_section ul li {
  position: relative;
  line-height: 15px;
  white-space: nowrap;
  display: table-cell;
  text-align: center;
}
.report_types_section ul li.active_tab a {
  border-right: 1px solid #000;
}
.report_types_section ul li:last-child a {
  padding-right: 0;
}
.report_types_section ul li:last-child a {
  border-right: 0;
}
.report_types_section ul li:last-child {
  text-align: right;
}
.report_types_section ul li:first-child a {
  padding-left: 0;
}
.report_types_section ul li a {
  float: left;
  text-decoration: none;
  color: #000;
  font-size: 18px;
  display: block;
  padding: 0px 18px;
  text-transform: uppercase;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  border-right: 1px solid #74a9d4;
}

如何使用 css 为任何屏幕自动在全宽菜单中拉伸菜单项

How to have menu items stretched in full width menu with css for any screen automatically

css

menu