Question

我正在尝试创建一个在线书店。当用户单击按钮（代表一种类型）时，将显示书本图片，名称，作者等。这些图像彼此相邻放置，名称标签位于图像下方，作者标签位于名称标签下方，依此类推。

因此，标签彼此相邻。

我尝试使用CSS设置标签的宽度

label {

    width: 250px;
    float: left;
    text-align: left;
    display: block;
}

标签的宽度受书名长度的影响，导致标签不对齐

Answer 1

尝试以下HTML和CSS：

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

img.scaled {
  width: 100%;
}

<figure>
  <p><img class=scaled src="https://www.w3.org/Style/Examples/007/st-tropez.jpg"
    alt="St. Tropez">
  <figcaption>Saint Tropez and its
    fort in the evening sun</figcaption>
</figure>

您可以将标签放在<figcaption>标签内

<figure>
  <p><img class=scaled src="https://www.w3.org/Style/Examples/007/st-tropez.jpg"
    alt="St. Tropez">
  <figcaption><asp:Label CssClass="label" ID="lblName1" runat="server" Text="Label"></asp:Label></figcaption>
</figure>

如何在c＃网络表单中对齐标签

1 个答案: