3

私はこの質問がすでに尋ねられていることを知っています、そして私は複数の答えを調べましたが、これを完全に理解することはできませんでした。

最後の文字が一緒に整列するように（右側が整列するように）ラベルを整列させたいのですが、それに付随するテキストボックスを整列させたいのです。これが私のcssスタイルシートクラスにあるものです：

.postLabel {display：block; フロート：左; text-align：right; パディング-左：100px; }

.postTextBox {display：block; フロート：左; text-align：right; パディング-左：400px; }

<asp:Label ID="Label1" runat="server" ForeColor="Black" Text="Title: " CssClass = "postLabel"></asp:Label>

<asp:TextBox ID="titleText" runat="server" Width = "213px" CssClass = "postTextBox"></asp:TextBox>

<asp:Label ID="Label2" runat="server" ForeColor="Black" Text="Label2: " CssClass = "postLabel"></asp:Label>

<asp:TextBox ID="Text2" runat="server" Width = "213px" CssClass = "postTextBox"></asp:TextBox>

私が見る問題：これは左手で整列されています。TitleのTとLabel2のLが整列します。ラベルとテキストボックスも互いに抱き合っているため、.CSSのパディングに従わないように見えます。

最後に、私の.aspxページの上部は次のようになります。

  <%@ Page Title="" Language="C#" MasterPageFile="~/Master"     ViewStateEncryptionMode="Always".... %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<link href="Style.css" rel="stylesheet" type="text/css" />

これは、.cssファイルを追加する必要がある場所ですか？要素'link'を要素'div'内にネストできないというエラーが表示されますか？

4

2 に答える 2

2

CSS は、理想的には、ドキュメントの head で参照する必要があります。

これらのラベルを右揃えにしたい場合は、次のことを強くお勧めします。

  1. ラベルとテキスト ボックスをラップする div を作成します。

    <div class='label-wrapper'>
  <label>Title:</label>
  <input type='text'>
</div>

  2. 次の CSS をスタイルシートに追加します。

    div.label-wrapper{
  position:relative;
  width: 400px; /* Set this to however far you want that right align to be from the left */
}
div.label-wrapper > label{
  position:absolute;
  right: 0;
  height: 15px; /*Or whatever height you like */
}
div.label-wrapper > input[type=text] {
  position:absolute;
  right: 0;
  top: 15px; /* Or whatever you set the label's height to, plus any desired margin */
}

アップデート

フィドルの例

あなたの例を見た後、必要な CSS は次のとおりです。上で説明したように、要素を div でラップする必要があります。

div.label-wrapper {
  position: relative;
  min-width: 300px;
  max-width: 400px;
  height: 24px;
  display:block;
}
div.label-wrapper > label {
  position: absolute;
  left: 0;
  width: 100px;
  text-align: right; /* not absolutely necessary, but will be if you assign a width to the label */
  white-space: nowrap; /* Again, not totally necessary, but if you run out of space otherwise you'll get multiple lines for your label */
}
div.label-wrapper > input[type=text] {
  position: absolute;
  left: 115px; /* Leaves a 15px gap between end of label and start of textbox.  Increase value if you want more than 15px or decrease if you want less */
}

それはあなたが望む外観を与えるでしょう.

于 2013-03-08T03:16:04.013 に答える
0

このcssファイルをヘッドコンテンツプレースホルダーに追加して試してみてください

<%@ Page Title="" Language="C#" MasterPageFile="~/Master"     ViewStateEncryptionMode="Always".... %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 **<link href="Style.css" rel="stylesheet" type="text/css" />**
  </asp:Content>
  <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
于 2013-03-08T05:06:50.257 に答える