gpt4 book ai didi

html - 改变 中控件相对于其他控件的位置

转载 作者:太空宇宙 更新时间:2023-11-04 03:19:41 26 4
gpt4 key购买 nike

我得到了这个图形用户界面:

enter image description here

但我想要这个:

enter image description here

图片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>

这怎么可能?

最佳答案

如果您可以修改 HTML,请在按钮周围添加一个包装元素并尝试使用以下 CSS。

诀窍是添加一个包装元素,它是一个内联 block 。在 inline-block 中,您可以在按钮上使用 display: block,并使用 margin left/right auto 将它们居中。

您可以根据需要指定宽度或填充来设置空白的样式。

如果您的 textarea 元素足够高,您可以通过为两个 textarea 元素指定 vertical-align: middle 使标签垂直居中和 .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>

关于html - 改变 <tr> 中控件相对于其他控件的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28091351/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com