Question

我刚接触HTML和CSS。我正在尝试使一些导航按钮具有相同的大小，即它们所位于面板宽度的三分之一。我已经获得了原始代码，尽管可以对其进行调整，但无法完全替换它。

按钮在无序列表中。它们是水平排列的，并应占据其所在面板的整个宽度。在Internet Explorer中，它们的渲染正确，每个大小均相同。在Chrome和Firefox中，它们的大小略有不同：显示文字最短的按钮的宽度最小，而随着文本变长，按钮也是如此。所有文本字符串都比它们的按钮小得多，因此按钮不需要增长以容纳字符串。

代码将列表项元素设置为1％的宽度，我读过这是一种使它们占据大致相同大小的方法。常识表明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>

我希望所有三个按钮都在同一行时大小相同，而与页面宽度无关（它们已经切换到特定宽度以下的垂直堆栈）。我想念什么？

谢谢。

Answer 1

“我已经获得了原始代码，虽然可以对其进行调整，但不能完全替换它。”
究竟什么能替代或不能替代？

表（显示：表格单元等）不应用于布局。
您可以选择“浮动”，“ flexbox”或“网格”。

如果只有3个元素，则可以简单地使用浮点数：

/* Using Floats */

.nav-justified > li {
    display: inline-block;
    float: left;
    width: 33.3333%;
}

.nav-justified::after { /* clearfix */
    content: '';
    display: table;
    clear: both;
}

如果希望

元素的大小相同，而不论它们有多少，最简单的方法是使用flexbox：

.nav-justified {
    display: flex;
}
.nav-justified > li {
    flex: 1 1 0; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0 */
}

这将为每个项目分配相同大小的大小，无论其内容如何。

Answer 2

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

Nav class and style of bootstrap

<application
tools:ignore="GoogleAppIndexingWarning">

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;
}

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

2 个答案: