0

2 列の上に Validation Summary (VS) コントロールがある 2 列のレイアウト ページがあります。VS は列の上のコンテナーの中央に配置されますが、これは私が望んでいることですが、可能であれば、さまざまな箇条書きを垂直方向に揃えたいと考えています。divVS を a (中央揃えのコンテナー div の内側)内に配置するなど、いくつかのことを試しましtext-align:left;たが、全体divがコンテナーの側面に移動します。div text-align:center;とVSも作成しようとしましたtext-align:left;が、ブロック全体が左に移動します。テーブルでも同じことを試しましたが、うまくいきませんでした。
ちなみにこれはFirefoxです。他のブラウザではテストしていませんが、FF で動作する必要があります。
めちゃくちゃな垂直方向の配置を示す写真は次のとおりです。
ここに画像の説明を入力

そして、これが私の VS コントロールのコードです。アライメントを試みていません (さらにコードが必要な場合はお知らせください)。 

<div id="container">
  <asp:Label ID="lblStatus" runat="server" ForeColor="Red"></asp:Label>
  <asp:ValidationSummary ID="VS1" runat="server" CssClass="validator" ValidationGroup="theform" />
  <div id="leftCol">

ページの中央にあるこれらの箇条書きを垂直方向に揃えるのを誰か手伝ってくれませんか?

4

3 に答える 3

1

箇条書きはリスト項目の一部であるため、それらを揃えることはできないと思います。上部の列に 3 つの div を配置し、validationsummary コントロールを中央の列に配置するなどの方法を試してみませんか。これを試して

HTMLコード

<div id="container" class="container">
    <div id="top" class="top">
        <div id="topLeft" class="topLeft">
            &nbsp;
        </div>
        <div id="topMiddle" class="topMiddle">
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
        </div>
        <div id="topRight" class="topRight">
            &nbsp;
        </div>
    </div>
    <div id="bottom" class="bottom">
        <div id="bottomLeft" class="bottomLeft">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="input value" ControlToValidate="TextBox1" Text="*"></asp:RequiredFieldValidator><br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Need come input for this" ControlToValidate="TextBox2" Text="*"></asp:RequiredFieldValidator><br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
        <div id="bottomRight" class="bottomRight">
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="please input text" ControlToValidate="TextBox3" Text="*"></asp:RequiredFieldValidator><br />
            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Where is the text?" ControlToValidate="TextBox4" Text="*"></asp:RequiredFieldValidator><br />
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </div>
    </div>
</div>

CSS

.container
{
    display: block;
    width:800px;
    margin:0px;
    padding:0px;
}

.top
{
    display:inline-block;
    width:800px;
}

.bottom
{
    display:inline-block;
}

.topMiddle
{
    display:inline;
    background-color:Yellow;
    float:left; 
    width:300px;   
}

.topLeft
{
    display:inline;   
    float:left;     
    width:250px; 
}

.topRight
{
    display:inline;    
    float:left; 
    width:250px;     
}

.bottomLeft
{
    display:inline;
    width:400px;
    float:left;
    background-color:Orange;
}

.bottomRight
{
    display:inline;
    width:400px;
    float:left;
    background-color:Lime;
}
于 2012-04-25T01:39:55.853 に答える
0

ねえ、あなたはあなたの親を定義するかもしれませんtext-align left center right

あなたのデザインによると

于 2012-04-25T09:18:44.760 に答える
0

これを使ってみてください…。

<style>
.validator ul li { text-align:left; }
</style>

編集

必要に応じて、左のパディングまたは左のマージンをulに設定します...

.validator ul { padding-left: 100px; }
于 2012-04-25T01:27:30.810 に答える