我有一个包含内容和按钮的<td>元素。除了将要修复的按钮的宽度之外，内容的width应该是全部。该按钮应与内容的右侧对齐。我怎样才能实现这一目标，以下方法无效：
<table border="1px">
<tr>
<td>
<div>
<div style="width: auto; overflow: auto;">
<span>
<form>
<textarea></textarea>
</form>
</span>
</div>
<div style="float: right; width: 32px;">
<button type="button" class="btn btn-primary">
Click
</button>
</div>
</div>
</td>
<td>Another cell</td>
</tr>
</table>
答案 0 :(得分：4)
<table border="1px">
<tr>
<td>
<div style="display:inline-block">
<div style="display: inherit;width: calc(100% - 32px);overflow: auto;">
<span>
<form>
<textarea></textarea>
</form>
</span>
</div>
<div style="float: right; width: 32px;">
<button type="button" class="btn btn-primary" title="Select Financial Instrument" style="width:100%; word-wrap: break-word;">
Click
</button>
</div>
</div>
</td>
<td>Another cell</td>
</tr>
</table>
答案 1 :(得分：2)
你可以减少按钮的字体大小，使其适合你设置为父div的所需宽度（32px）
并非真正了解这种html结构背后的逻辑，但这是您的解决方案
<html>
<body>
<!--- Chart Data --->
<div style="width: 100%; float: left;text-align:center; margin-top:15px; background:#ffbc49 !important; color:#4e5257 !important; font-size:25px; font-weight: 800; margin-bottom:0px; line-height:70px;">sdjskdj</div>
<div class="add_more_chart240 chart_list" id="add_more_chart240" style="margin: 10px 10px; width:calc(100% - 20px); float: left; border: 1px solid #757575;">
<div class="forlegend col-md-12" style="display:none">
<input type="text" class="form-control lenendname" placeholder="Legend Name" value="sdsjdsk">
<input type="text" class="form-control lenendname" placeholder="Legend Name" value="L2">
</div>
<input type="hidden" class="form-control y_series_col" min="2" max="4" placeholder="2" value="2" id="y_series_col" />
<input type="hidden" class="form-control x_series_col" min="2" max="10" placeholder="2" value="5" id="x_series_col" />
<!--Graph start-->
<div id="curve_chart240" class="curve_chart" style="width:95%; height: 430px; margin:0 auto;"></div>
</div>
<!--Graph end-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
$.each($('.chart_list'), function() {
var class_name = this.id ;
var y_col = 2;
var x_col = 5;
var data = new google.visualization.DataTable();
var legend_label = [];
$("#"+class_name).find('.forlegend :input').each(function(e){
legend_label.push(this.value);
});
data.addColumn('number', '');
for(var i = 1;i<=y_col;i++)
{
data.addColumn('number', legend_label[i-1]);
data.addColumn({type:'number', role:'annotation'});
}
data.addRows([[1,50.1,50.1,83.4,83.4],[2,49.3,49.3,50,50],[3,80,80,90,90],[4,17.5,17.5,23.3,23.3],[5,91,91,13.3,13.3]]);
var options = {
isStacked: true,
annotations: {
textStyle: {
fontSize: 15
},
stem: {
length: 16
},
},
title: 'sdjskdjk',
//displayAnnotations: true,
legend: { position: 'bottom', alignment: 'middle' },
pointSize: 5,
vAxis: {
title:"% score",
viewWindow: {
max:100,
min:0
}
},
hAxis : {
textStyle : {
fontSize: 20 // or the number you want
}
},
colors:['#52B183','#53D2F8','#B573AF','#D7E542'],
};
var dynamic_id = class_name.replace('add_more_chart','');
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'+dynamic_id));
chart.draw(data, options);
});
}
</script>
</body>
</html>
答案 2 :(得分：1)
这是你需要的吗？
<table border="1px">
<tr>
<td>
<div style="display: flex;">
<form>
<textarea></textarea>
</form>
<button type="button" class="btn btn-primary" title="Select Financial Instrument">
Click
</button>
</div>
</td>
<td>Another cell</td>
</tr>
</table>
答案 3 :(得分：1)
您可以使用<table>并将表单放在一个<td>中，将按钮放在另一个<td>中。然后，您可以修复包含按钮的<td>的宽度。这会强制第一个<table>根据<textarea>宽度调整其宽度。
选中此jsFiddle，尝试更改主表格的宽度，看看<td>（以及* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }）如何相应地调整宽度。
<强>更新
如何，不改变HTML结构：
<table border="1px" style="width: 450px">
<tr>
<td>
<div style="display: table; width: 100%">
<div style="display: table-row">
<div style="display: table-cell">
<span style="display: block; width: 100%">
<form style="display: block; width: 100%">
<textarea style="display: block; width: 100%"></textarea>
</form>
</span>
</div><!-- table-cell -->
<div style="display: table-cell; width: 32px;">
<button type="button" class="btn btn-primary">
Click
</button>
</div><!-- table-cell -->
</div><!-- table-row -->
</div><!-- table -->
</td>
<td>Another cell</td>
</tr>
</table> #Interactive{
background: blue;
float: left;}
答案 4 :(得分：1)
基于Gerard's answer，以下效果最佳：
<table border="1px">
<tr>
<td>
<div style="display: inline-flex; align-items: center; width: 100%;">
<div>
<span>
<form>
<textarea></textarea>
</form>
</span>
</div>
<div style="padding: 5px;">
<button type="button">
Click
</button>
</div>
</div>
</td>
<td>Another cell</td>
</tr>
</table>