希望显示以下内容:
>
其中的“。。。” 第一行（Web项目）中的按钮与红线完全右对齐（有一点填充）
其中第2行（根命名空间）中的输入字段填满了右边的空格，直到红线为止（稍作填充）
其中第3行（连接字符串）中的2个按钮与红线完全右对齐（有一个盖子填充）。
我试过以下方法，但它没有正确地执行--而且它只在一定的宽度下工作--如果我增加或减少宽度，事情就变得很难看了:
减小宽度:
我当前的HTML如下所示:
<div id = "ProjectSelector" width = 100%>
<table width = "100%" style = "padding-bottom: 10px;">
<tr>
<td style="white-space: nowrap; width: 140px;">Web Project (.csproj)</td>
<td style="width: 99%;" ><input id = "webproj" style="width: 97%"/><button id="webproj_browse">...</button></td>
</tr>
<tr>
<td>Root Namespace</td>
<td style="width: 99%;"><input id = "rootnamespace" style="width: 99%"/></td>
</tr>
<tr>
<td>Connection String</td>
<td style="width: 99%;"><select id = "connectionstring" style = "width: 87%"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></td>
</tr>
</table>
</div>
问题:如何正确设置表格和第2列内容的格式？
您问题的标题描述了一种典型的flex行为。 您可以在表中使用flex容器:
null
.flex {
display: flex;
}
.flex-1 {
flex-grow: 1;
}<div id="ProjectSelector" width=1 00%>
<table width="100%" style="padding-bottom: 10px;">
<tr>
<td style="white-space: nowrap; width:0;">Web Project (.csproj)</td>
<td>
<div class="flex"><input id="webproj" class="flex-1" /><button id="webproj_browse">...</button></div>
</td>
</tr>
<tr>
<td>Root Namespace</td>
<td>
<div class="flex"><input id="rootnamespace" class="flex-1" /></div>
</td>
</tr>
<tr>
<td>Connection String</td>
<td>
<div class="flex">
<select id="connectionstring" class="flex-1"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></div>
</td>
</tr>
</table>
</div>