Question

我正在使用以下代码进行text-align：

<strong>Status:</strong> <span style="color: #01DF3A;">Updated</span>
<span align="right" style="text-align: right;"><strong>TeamSpeak:</strong> ts.abendigo.org</span>

第一个文字Status: Updated应位于左侧，但文字TeamSpeak: ts.abendigo.org的第二部分应位于右侧，但使用已弃用的align="right"和{{1}似乎对style="text-align: right;"没有影响。它们可以与span等其他标签一起使用，但我希望将两个文本放在同一行。

Answer 1

注意：这个答案解释了块级别与内联元素的工作原理。

text-align属性仅适用于块元素。 <span>是inline。您应该使用<div>或<p>。

<strong>Status:</strong> <span style="color: #01DF3A;">Updated</span>
<div style="text-align: right;">
    <span><strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>

注意：您可以将span设置为块元素，但除非您的HTML已修复（由其他某些应用程序生成）并且您无法更改它，否则请勿执行此操作。最好保持标准，并使用div或p。

span { display: block; }

要获得有效的解决方案，您应该在范围内使用float: right;。我不明白为什么你需要在其他文本上使用float:left;。

Answer 2

<span>是一个内联元素。从下面的屏幕截图中，您可以看到它的宽度为188.859px，这是其中文本的大小。

您必须将内联元素包装在块元素中。我建议这个：

.status {
  float: left;
}
.teamspeak {
  float: right;
}

<div class="status">
  <strong>Status:</strong><span style="color: #01DF3A;">Updated</span>
</div>
<div class="teamspeak">
  <strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>

Answer 3

HTML

public class Tab1 extends Fragment {

    Context mContext;
    private GridView mGridView;
    public static String[] eatFoodyImages = {
            "https://media.giphy.com/media/T7VuyIFl3jimI/giphy.gif",
            "http://www.goodwp.com/large/201210/24514.jpg",
            "http://www.goodwp.com/mini/201210/24499.jpg",
            "https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg",
            "http://i.imgur.com/rFLNqWI.jpg",
            "http://i.imgur.com/C9pBVt7.jpg",
            "http://i.imgur.com/rT5vXE1.jpg",
            "http://i.imgur.com/aIy5R2k.jpg",
            "http://i.imgur.com/MoJs9pT.jpg",
            "http://i.imgur.com/S963yEM.jpg",
            "http://i.imgur.com/rLR2cyc.jpg",
            "http://i.imgur.com/SEPdUIx.jpg",
            "http://i.imgur.com/aC9OjaM.jpg",
            "http://i.imgur.com/76Jfv9b.jpg",
            "http://i.imgur.com/fUX7EIB.jpg",
            "http://i.imgur.com/syELajx.jpg",
            "http://i.imgur.com/COzBnru.jpg",
            "http://i.imgur.com/Z3QjilA.jpg",
    };

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.tab_1, container, false);
        mGridView = (GridView)v.findViewById(R.id.grid_view);

        mContext=getActivity().getApplicationContext();
        mGridView.setAdapter(new ImageAdapter(mContext, eatFoodyImages));

        //Click Event on Images in GridView
        mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(mContext, "Pic" + (position + 1) +" Selected", Toast.LENGTH_SHORT).show();
            }
        });
        return v;
    }
}

<强> CSS

<div class="container"> <strong>Status:</strong> 
<span class="left">Updated</span>
<span class="right">
<strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>

Answer 4

您可以使用此

<div>
  <strong>Status: </strong><span style="color: #01DF3A;">Updated</span>
  <span style="float:right">TeamSpeak: ts.abendigo.org</span>
</div>

Answer 5

最简单的方法是使用text-align属性的块或表：

<strong>Status:</strong> <span style="color: #01DF3A;display:inline-block;width:45%">Updated</span><span align="right" style="text-align: right;display:inline-block;width:45%"><strong>TeamSpeak:</strong> ts.abendigo.org</span>

<table width="100%">
    <tr>
        <td><strong>Status:</strong> <span style="color: #01DF3A">Updated</span></td>
        <td style="text-align:right"><span align="right" style="text-align:right"><strong>TeamSpeak:</strong> ts.abendigo.org</span></td>
    </tr>
</table>

尝试小提琴： JSFiddle

Answer 6

尝试以下链接

    .status{
       float:left
    }
   .team{
        float:right;
     }

Fiddle - Link

Answer 7

HTML：

<div class="status">
  <strong>Status:</strong><span style="color: #01DF3A;">&nbsp;Updated</span>
</div>
<div class="teamspeak">
  <strong>TeamSpeak:</strong> ts.abendigo.org</span>
</div>

的CSS：

.status {
  float: left;
}
.teamspeak {
  float: right;
}

Demo

HTML / CSS文本对齐不起作用

7 个答案: