如何将按钮和文本输入设置为与表中其他行相同的宽度？

Question

在表格的第一行中，我放置了一个文本输入和一个按钮的组合。以下行仅包含文本输入字段。所有行的宽度应相同。参考以下屏幕截图。

我的问题是如何使按钮和文本框与表中的其他行大小相同？

当前状态：（fiddle）

期望状态：

＆＃13;

＆＃13;

<table class="">
  <tr>
    <td>text:
    </td>
    <td>
      <input type="text" ID="txtDescPoint" CssClass="form-control input-sm" />
      <input type="button" class="" value="..." id="ffcolorswtach" style="position: relative; left: 5px; top: 0px; color: #000000; background-color: #d8d5d5;" onclick="PickColor(1, false, false)" />
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>X:
    </td>
    <td>
      <input type="text" ID="txtLon" runat="server" CssClass="form-control btn-sm" />
    </td>
  </tr>
  <tr>
    <td>Y:
    </td>
    <td>
      <input type="text" ID="txtLat" runat="server" CssClass="form-control btn-sm" />
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试宽度：输入标签为77％，

<input type="text" style="width:77%" ID="txtDescPoint" CssClass="form-control input-sm" />

Answer 2

  

你的jsfiddle已经在使用bootstrap运行了！

那么为什么要使用一种非常古老的方式来布局表格呢？ Bootstrap已经为您提供了许多可用于设置语义和可维护表单的现成工具/类：（your updated jsFiddle）

.form-control,
.input-group {
  width: 100%;
  margin-bottom: 10px;
}

.input-group-addon {
  min-width:60px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div style="width: 300px; margin: 20px auto">

  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Text</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Button</button>
      </span>
  </div>
  
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon2">X</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon2">
  </div>

  <div class="input-group">
    <span class="input-group-addon" id="basic-addon3">Y</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon3">
  </div>
</div>

Answer 3

.col-70 {
  width: 70%;
}

            <table class="">
                <tr>
                    <td>text:
                    </td>
                    <td>

                        <input class="col-70" type="text" ID="txtDescPoint" CssClass="form-control input-sm" />
                         <input class="col-30" type="button" class="" value="..." id="ffcolorswtach" style="position: relative; left: 5px; top: 0px; color: #000000; background-color: #d8d5d5;" onclick="PickColor(1, false, false)" />
                    </td>
                    <td>
                
                    </td>
                </tr>
                <tr>
                    <td>X:
                    </td>
                    <td>
                        <input type="text" ID="txtLon" runat="server" CssClass="form-control btn-sm" />
                    </td>

                </tr>
                <tr>
                    <td>Y:
                    </td>
                    <td>
                        <input type="text" ID="txtLat" runat="server" CssClass="form-control btn-sm"/>
                    </td>
                </tr>
            </table>

Answer 4

Use below code to view table elements as your requirement

<table>
		<tr>
			<td>text:</td>
			<td><input type="text" ID="txtDescPoint"
				CssClass="form-control input-sm" /></td>
			<td><input type="button" class="" value="..."
				id="ffcolorswtach"
				style="position: relative;left: 5px; top: 0px; color: #000000; background-color: #d8d5d5;"
				onclick="PickColor(1, false, false)" /></td>
			<td></td>
		</tr>
		<tr>
			<td>X:</td>
			<td colspan="2"><input type="text" ID="txtLon" runat="server"
				CssClass="form-control btn-sm" style="width: 100%;" /></td>

		</tr>
		<tr>
			<td>Y:</td>
			<td colspan="2"><input type="text" ID="txtLat" runat="server"
				CssClass="form-control btn-sm" style="width: 100%;" /></td>
		</tr>
	</table>

Answer 5

将position: absolute;分配给该按钮，将relative分配给其父母，根据其上的位置设置使用，并按如下方式微调其他设置：

＆＃13;

＆＃13;

table tr:first-child td:nth-child(2) {
  position: relative;
}

input[type="text"] {
  width: 180px;
  box-sizing: border-box;
}

#txtDescPoint {
  padding-right: 30px;
}

#ffcolorswtach {
  position: absolute;
  right: 3px;
  top: 3px;
  color: #000000;
  background-color: #d8d5d5;
}

＆＃13;

<table class="">
  <tr>
    <td>text:
    </td>
    <td>

      <input type="text" ID="txtDescPoint" CssClass="form-control input-sm" />
      <input type="button" class="" value="..." id="ffcolorswtach" onclick="PickColor(1, false, false)" />
    </td>
    <td>

    </td>
  </tr>
  <tr>
    <td>X:
    </td>
    <td>
      <input type="text" ID="txtLon" runat="server" CssClass="form-control btn-sm" />
    </td>

  </tr>
  <tr>
    <td>Y:
    </td>
    <td>
      <input type="text" ID="txtLat" CssClass="form-control btn-sm" />
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

注意：我在文本输入元素上使用了padding-right，因此文本输入不会被按钮覆盖。

Answer 6

使用flexbox代替table来改变您的布局：

＆＃13;

＆＃13;

.flex {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.flex .row {
  display: flex;
}

.flex .row span {
  min-width: 50px;
}

.flex .row .input-wrap,
.flex .row>input {
  flex: 1;
}

.flex .row .input-wrap {
  display: flex;
}

.flex .row .input-wrap input {
  flex: 1;
}

.flex .row .input-wrap input[type="button"] {
  margin-left: 5px;
}

＆＃13;

<div class="flex">
  <div class="row">
    <span>text:</span>
    <div class="input-wrap">
      <input type="text" ID="txtDescPoint" CssClass="form-control input-sm" />
      <input type="button" class="" value="..." id="ffcolorswtach" style="color: #000000; background-color: #d8d5d5;" onclick="PickColor(1, false, false)" /></div>
  </div>
  <div class="row">
    <span>X:</span>
    <input type="text" ID="txtLon" runat="server" CssClass="form-control btn-sm" />
  </div>
  <div class="row"><span>Y:</span>
    <input type="text" ID="txtLat" CssClass="form-control btn-sm" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;