我得到了这个gui:
但我想要这个:
图片代码nr1:
<tr>
<td colspan ="3">
<asp:ListBox ID="tr_process_list" runat="server" Rows="10" style="width:180px;" OnInit="tr_process_list_Init" SelectionMode="Multiple">
</asp:ListBox>
<asp:Button runat="server" ID="addProcess" Text="Add" OnClick="addProcess_Click"/>
<asp:Button runat="server" ID="removeProcess" Text="Remove" OnClick="removeProcess_Click" />
<asp:ListBox ID="tr_process_selectedlist" runat="server" Rows="10" style="width:180px;" OnInit="tr_process_selectedlist_Init" OnSelectedIndexChanged="tr_process_selectedlist_SelectedIndexChanged" AutoPostBack="true">
</asp:ListBox>
</td>
</tr>
这怎么可能?
答案 0 :(得分:1)
如果您可以修改HTML,请在按钮周围添加包装元素并尝试以下CSS。
诀窍是添加一个内联块的包装元素。在内联块中,您可以在按钮上使用display: block
,左/右边距自动将它们居中。
您可以根据需要指定宽度或填充以设置空白样式。
如果您的textarea
元素足够高,则可以通过将vertical-align: middle
指定给两个textarea
元素和.inline-panel
元素来垂直居中标签。
/* Example for large text area panels */
td {
border: 1px dotted gray;
}
td textarea {
height: 200px; /* for example */
vertical-align: middle;
}
.inline-panel {
border: 1px dotted blue;
display: inline-block;
vertical-align: middle;
text-align: center;
width: 8em; /* optional */
padding-bottom: 0em; /* optional */
}
.inline-panel button {
display: block;
margin: 10px auto; /*left right values of auto for centering */
}
<table>
<tr>
<td>
<textarea></textarea>
<div class="inline-panel">
<button>View</button>
<button>Reset</button>
</div>
<textarea></textarea>
</td>
</tr>
</table>
答案 1 :(得分:1)
为什么不把你的行划分为3?
<tr>
<td>
<asp:ListBox ID="tr_process_list" runat="server" Rows="10" style="width:180px;" OnInit="tr_process_list_Init" SelectionMode="Multiple">
</asp:ListBox>
</td>
<td>
<asp:Button runat="server" ID="addProcess" Text="Add" OnClick="addProcess_Click"/>
<asp:Button runat="server" ID="removeProcess" Text="Remove" OnClick="removeProcess_Click" style="clear:both;" />
</td>
<td>
<asp:ListBox ID="tr_process_selectedlist" runat="server" Rows="10" style="width:180px;" OnInit="tr_process_selectedlist_Init" OnSelectedIndexChanged="tr_process_selectedlist_SelectedIndexChanged" AutoPostBack="true">
</asp:ListBox>
</td>
</tr>