I have 3 buttons in a popup form. I want to align first button at the top and other two together at the second line/row. I have implemented the below method and failed where top button is top but not wrap the content and two buttons at the bottom mesh together. How i can manipulate the buttons?
我有一个弹出窗口中的3个按钮。我想在第二行/第一行对齐第一个按钮,将第二个按钮对齐在一起。我已经实现了以下方法,并且顶部按钮位于顶部但未将内容和底部网格中的两个按钮包裹在一起时失败。我如何操纵按钮?
This is my html:
这是我的HTML:
<div>
<table>
<tr><td colspan="2"><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn1</a></td></tr>
<tr>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn2</a></td>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn3</a></td>
</tr>
</table>
</div>
How they look like:
它们看起来如何:
Thank you.
1 个解决方案
#1
1
The main problem you're having here is that you are trying to apply styles from the #acc_popup CSS selector to multiple elements on the same page.
您在这里遇到的主要问题是您正在尝试将#acc_popup CSS选择器中的样式应用于同一页面上的多个元素。
id tags need to be unique in the DOM structure, and multiple occurrences of them will cause your styles or scripts to apply only to the first occurrence of the id.
id标记在DOM结构中需要是唯一的,并且多次出现它们会导致您的样式或脚本仅应用于第一次出现的id。
Swap the id for a class.
交换一个类的id。
In the HTML:
在HTML中:
<td><a href="#" class="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn</a></td>
In the CSS:
在CSS中:
.acc_popup {
//styles go here
}
Edit:
Now since you've informed us you're not doing this with css. This should do what you want.
既然你已经通知我们你没有用css做这件事。这应该做你想要的。
Wrap the first button in a <td> and add colspan=2 to that element. If it isn't blatantly clear, this makes the table cell span 2 columns instead of the default 1.
将第一个按钮包裹在中,并将colspan = 2添加到该元素中。如果它没有明显清楚,这会使表格单元格跨越2列而不是默认值1。
<div>
<table>
<tr>
<td colspan="2"><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn1</a></td>
</tr>
<tr>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn2</a></td>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn3</a></td>
</tr>
</table>
</div>
#1
1
The main problem you're having here is that you are trying to apply styles from the #acc_popup CSS selector to multiple elements on the same page.
您在这里遇到的主要问题是您正在尝试将#acc_popup CSS选择器中的样式应用于同一页面上的多个元素。
id tags need to be unique in the DOM structure, and multiple occurrences of them will cause your styles or scripts to apply only to the first occurrence of the id.
id标记在DOM结构中需要是唯一的,并且多次出现它们会导致您的样式或脚本仅应用于第一次出现的id。
Swap the id for a class.
交换一个类的id。
In the HTML:
在HTML中:
<td><a href="#" class="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn</a></td>
In the CSS:
在CSS中:
.acc_popup {
//styles go here
}
Edit:
Now since you've informed us you're not doing this with css. This should do what you want.
既然你已经通知我们你没有用css做这件事。这应该做你想要的。
Wrap the first button in a <td> and add colspan=2 to that element. If it isn't blatantly clear, this makes the table cell span 2 columns instead of the default 1.
将第一个按钮包裹在中,并将colspan = 2添加到该元素中。如果它没有明显清楚,这会使表格单元格跨越2列而不是默认值1。
<div>
<table>
<tr>
<td colspan="2"><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn1</a></td>
</tr>
<tr>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn2</a></td>
<td><a href="#" id="acc_popup" data-role="button" data-rel="back" data-theme="c">Btn3</a></td>
</tr>
</table>
</div>