时间戳

首页 > 解决方案 > 有没有办法使这些列表元素大小相同？

html - 有没有办法使这些列表元素大小相同？

问题描述

我对 HTML 和 CSS 还很陌生。我试图让一些导航按钮具有相同的大小，它们所在面板宽度的三分之一。我已经获得了原始代码，虽然我可以调整它，但我不能完全替换它.

这些按钮位于无序列表中。它们水平排列，应该填满它们所在面板的整个宽度。在 Internet Explorer 中，它们被正确呈现，每个大小都相同。在 Chrome 和 Firefox 中，它们的大小略有不同：显示文本最短的按钮宽度最小，并且随着文本变长，按钮也会变长。所有的文本字符串都比它们的按钮小很多，所以按钮不需要增长来容纳字符串。

该代码将列表项元素设置为 1% 宽度，我读过这是一种让它们占据大致相同大小的 hacky 方法。常识表明 33% 应该给我我想要的东西，但是所有三个按钮占据的总宽度约为 33%，剩下的空间应该是空的。我尝试了各种不同的百分比，但结果不是我所期望的：10% 似乎适用于更宽的窗户，但不适用于窄窗户；在 10-33% 之间，按钮大小相同但逐渐变小，不再填满可用空间；任何高于 33% 的按钮都会再次开始增长，但只有前两个，并且不一定会填满可用空间。

我尝试从 table-cell 更改 li 元素的显示属性，但似乎没有一个选项有效。对 ul 元素的类似更改也无济于事。我还认为将文本字符串的最大宽度减少到 80% 可能会阻止按钮与字符串的长度成比例地增长，但这并没有什么区别。

名单：

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
    min-width: 400px;
    background-color: #bbc98f;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-pills > li {
  float: left;
    border-style: solid;
    text-align: center;
}

.nav-pills > li + li {
  margin-left: 2px;
}

.nav-justified > li {
  float: none;
    display: table-cell;
    width: 1%;
}

.panel {
  margin-bottom: 10px;
  margin-top: 10px;
  background-color: #ffffff;
}

.panel-body {
  padding: 15px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body class=""> 
    <div class="body-content">
		<div class="panel panel-body">
			<ul class="nav nav-pills nav-justified">
				<li>
					<a href="/PartLibrary/Parts">Parts</a>
				</li>
				<li>
					<a href="/PartLibrary/Recipes">Recipes</a>
				</li>
				<li>
					<a href="/PartLibrary/RobotPrograms">Robot Programs</a>
				</li>
			</ul>
		</div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

我希望所有三个按钮在单行中时无论页面宽度如何都具有相同的大小（它们已经切换到特定宽度以下的垂直堆栈）。我错过了什么？

提前致谢。

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

如果您使用引导框架，请使用引导的类，而不是创建自己的样式。

导航类和引导程序的样式

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
    min-width: 400px;
    background-color: #bbc98f;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-pills > li {
  float: left;
    border-style: solid;
    text-align: center;
}

.nav-pills > li + li {
  margin-left: 2px;
}

.nav-justified > li {
  float: none;
    display: table-cell;
    width: 1%;
}

.panel {
  margin-bottom: 10px;
  margin-top: 10px;
  background-color: #ffffff;
}

.panel-body {
  padding: 15px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<body class=""> 
    <div class="body-content">
		<div class="panel panel-body">
			<ul class="nav nav-pills">
				<li>
					<a href="/PartLibrary/Parts">Parts</a>
				</li>
				<li>
					<a href="/PartLibrary/Recipes">Recipes</a>
				</li>
				<li>
					<a href="/PartLibrary/RobotPrograms">Robot Programs</a>
				</li>
			</ul>
		</div>
    </div>
    

</body>

推荐阅读