Question

我有这个HTML标记：

<div style="display:table;">
    <span style="display:table-cell; vertical-align:middle;"></span>
    <a style="display:table-cell;"><span></span></a>
    <span style="display:table-cell; vertical-align:middle;"></span>
</div>

我想要的只是我的最后一个跨度应该显示在新的一行上。

Answer 1

要将其换行，请将其设置为 p 标记：

   <div style="display:table;">
        <span style="display:table-cell; vertical-align:middle;"></span>
        <a style="display:table-cell;"><span></span></a>
        <p style="display:table-cell; vertical-align:middle;"></p>
    </div

或者使用 br 标记：

   <div style="display:table;">
        <span style="display:table-cell; vertical-align:middle;"></span>
        <a style="display:table-cell;"><span></span></a>
        <br>
        <span style="display:table-cell; vertical-align:middle;"></span>
    </div

Answer 2

请尝试使用此代码。并从父div中移除display：table-cell 。

＆＃13;

<div>
  <span style="display:table-cell; vertical-align:middle;">First</span>
  <a style="display:table-cell;"><span>Second span</span></a>
  <br />
  <span style="display:table-cell; vertical-align:middle;">child</span>
</div>

＆＃13;

Answer 3

您使用display:table因此其所有成员都显示在单元格

中

所以你想要在新行中的最后一个跨度，你将从div中删除table并只显示它

<div>
  <span style="display:table-cell; vertical-align:middle;">1</span>
  <a style="display:table-cell;"><span>2</span></a>
  <br />
  <span style="display:table-cell; vertical-align:middle;">3</span>
</div>

Answer 4

如果您绝对必须使用这些内联样式，您仍然可以使用css定位最后一个跨度但是必须使用！important。

  final RadioGroup radioGroup = (RadioGroup) cancelDialog.findViewById(R.id.cancle_booking_radio_group);

    radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {

            View radioButton = radioGroup.findViewById(checkedId);
            int index = radioGroup.indexOfChild(radioButton);
            switch (index) {
                case 0:
                   // radio button one selected
                    break;
                case 1:
                   // radio button two selected
                    break;
                case 2:
                   // radio button Three selected
                    break;

            }
        }
    });

Fiddle

如何在div中创建一个新行

4 个答案: