位置股利在輸入框的右上角

我動態頁面上插入DIV，下面是簡單的例子：位置股利在輸入框的右上角

HTML：

<div class="left-column"> 
    <p> 
     <label>Company Name:</label> 
     <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox" /> 

    </p> 
    <p> 
     <label>Phone:</label> 
     <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_PhoneNumberTextBox" __id="105" />   
    </p> 
</div> 
<div class="right-column"> 
    <p> 
     <label __id="109">Contact Name:</label> 
     <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_ContactNameTextBox" __id="110" /> 
    </p> 
    <p> 
     <label>Email:</label> 
     <input type="text" maxlength="255" id="BodyContentPlaceholder_LeftColumnContentPlaceHolder_EmailTextBox" />  </p> 
</div> 
<div style="clear:both;"> 
    <input type="submit" value="Submit Request" id="myButton" /> 
</div>

CSS：

.inputError { 
    border: 1px solid #006; 
    background: pink; 
} 
.divError { 
    border: 1px solid black; 
    background: red; 

} 
label { 
    float:left; 
    width:120px; 
    text-align:right; 
    margin-right:5px; 
} 
input[type="text"] { 
    width: 150px; 
} 
.left-column, .right-column { 
    float:left; 
    position: relative; 
} 
.left-column p, .right-column p { 
    padding-bottom: 10px; 
} 
.left-column { 
    margin-right:5px; 
}

JS：

$(document).ready(function() { 

    $("#myButton").on("click", DoTrick); 
}); 

function DoTrick() 
{ 
    var $input = $("#BodyContentPlaceholder_LeftColumnContentPlaceHolder_CompanyNameTextBox"); 

    var $div = $("<div/>") 
     .attr("id", "GGG") 
     .addClass("divError") 
     .text("This field has error"); 

    $div.insertAfter($input); 

}

但最好我想它在一般的工作，每當我知道我要添加DIV，顯示在它右上方輸入元素，這是驗證消息應該「浮動」

眼下當我添加DIV時，它會中斷佈局，並且不會到達我需要的位置。

來源

2013-03-25 katit

這不是[你的其他問題]（http://stackoverflow.com/questions/15603234/asp-net-validation-override-positioning-popup-messages）？ – MikeSmithDev 2013-03-25 00:35:46

是的，我認爲我需要簡化 – katit 2013-03-25 00:53:34

這可能是一個位置：絕對的情況。

看到http://jsfiddle.net/HNQMm/3/

添加一個類來包裝的字段（我用。相對），並將其設置爲「的位置是：相對於」。

，然後你的錯誤框可以是這樣的：

.divError { 
border: 1px solid black; 
background: red; 
position: absolute; 
top: 0; 
left: 50px;

}現在

.divError的頂部和左側值是相對於外部，相對DIV這樣你就可以將它們恰恰是你需要他們。

來源

2013-03-25 00:29:05 orolo

您只需按像素定位任何元素即可。我想應該是類似的東西：

p.pos_fixed 
{ 
position:fixed; 
top:30px; 
right:5px; 
}

來源

2013-03-25 00:23:46 Kostadin

your.divError是<div>，這意味着它具有顯示：塊屬性，所以它會坐在一個新的生產線。

如果你做了它<span>而是將與輸入元素內嵌坐（或修改CSS類）

來源

2013-03-25 00:25:19 DaveB

不知道如果我理解正確你，但你在找這樣的事情？ http://jsfiddle.net/5ZM25/1/

可以將insertAfter更改爲insertBefore，然後將它放在您想要的位置，如果您希望它「位於輸入框右上角」。

來源

2013-03-25 00:28:45 user1823799

位置股利在輸入框的右上角

回答

相關問題