如何使一個元素不擴大其他人的邊際

我有一個表單，每次輸入獲得焦點時，就會顯示這個提示並告訴用戶應該做什麼（「指定一個8位數的密碼」等等）。如何使一個元素不擴大其他人的邊際

問題是，每次出現時，由於尺寸的原因，輸入的邊距變大或變小（取決於提示的大小）。我希望投入保持在原來的位置，而不是每次都彼此遠離。

這是提示（標記爲p元素）的css部分。

p { 
margin: 0px 0 0 0; 
background-color: rgba(0, 0, 0, 0.1); 
border: 2px solid #5cb85c; 
border-radius: 5px; 
padding: 3px; 
padding-left: 8px; 
padding-right: 8px; 
color: white; 
box-shadow: 10px 10px 9px -5px rgba(0,0,0,0.2); 
box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,0.9); 
width: 350px; 
text-align: center;}

我想不出更多必要的代碼部分發布，讓我知道你是否需要它們。

在此先感謝您的答案。

我的html：

<table class="innertable"> 
    <tr> 
     <td width="200px"> 
              Character Name: 
     </td> 
     <td> 
     <input type="text" name="name" id="name" placeholder="Firstname_Lastname" class="form-control" class="col-md-3" value=""> 

    </td> 
    <td> 
    <p id="nameHint" class="hint">Please specify a username using A-Z letters only, in a Firstname_Lastname format</p> 
    </td> 
</tr> 
<tr> 
    <td> 
              Password: 
    </td> 
    <td> 
              <input type="password" name="password" id="password" class="form-control"> 
    </td> 
    <td> 
    <p id="passHint" class="hint">Please specify an 8 digits password</p> 
    </td> 
    </tr> 
    <tr> 
    <td> 
             Verify Password: 
    </td> 
    <td> 
    <input type="password" name="password_verify" id="password_verify" class="form-control" value=""> 
    </td> 
    <td> 
    <p id="verifyHint" class="hint">Please specify your password again, for verification</p> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    Age: 
    </td> 
    <td> 
    <input type="text" name="age" id="age" class="form-control" value="">         
    </td>

來源

2015-02-04 Ran ST

您也需要留出足夠的空間，提示出現，或作出提示，位置是：絕對的;和z-index：10（任何高於1的值都可以）並將其放置在相關輸入附近。沒有看到你的HTML我不能給任何更好的建議。

現在，我看到了你的HTML，我相信你可以通過手動設置寬度爲輸入列解決這個問題：

<td width="200px"> 
    <input type ... 
</td>

來源

2015-02-04 23:42:17

我正在使用bootstrap（不幸的是團隊要求..）無論如何，我必須感謝你的答案。 –

嘗試增加：

box-sizing: border-box;

來源

2015-02-04 23:47:49 motoDrizzt

感謝您的回答，不幸的是它沒有工作:( –

是的，對不起，我誤解了。 – motoDrizzt

您需要添加position:relative;到表，position:absolute;到p元素。這是相對於桌子而言的。所以你可以使用top, left, right, bottom屬性來眼球。小提琴：http://jsfiddle.net/v62rbdLz/

代碼：

table { 
    position: relative; 
} 
p { 
    position: absolute; 
} 
#nameHint { 
    top: 0px; 
} 
#passHint { 
    top: 50px; 
} 
#verifyHint { 
    top: 80px; 
}

現在你應該小心，仔細檢查值，所以佈局就不會剎車。

來源

2015-02-05 00:29:37 IGRACH

如何使一個元素不擴大其他人的邊際

回答

相關問題