如何在尺寸相對的元素下定位表單？

我正在建立一個博客，並希望在帖子下做一個評論部分。帖子的維度是相對的（帖子是一個段落），我希望我的評論部分（表單）正確。如果我做這樣的事情：如何在尺寸相對的元素下定位表單？

HTML

<div class="post"> 
    <a class="titles">{{ post.title }}</a> 
    <br> 
    <p class="Parg">{{ post.text }}</p> 
    <br> 
</div> 
<div> 
    <form> 
    <input type="text" name="username" placeholder="Nickname" required /> 
    <br> 
    <br> 
    <input type="text" name="body" placeholder="Write your comment here" required /> 
    <br> 
    <br> 
    <input type="submit" name="register" value="Add comment" /> 
    </form> 
</div>

CSS

.title{ 
    text-align: center; 
    font-family: Fipps; 
} 
.post{ 
    text-align: center; 
} 
.Parg{ 
    position: relative; 
    margin-left: 30%; 
    height: 20px; 
    width: 800px; 
    font-family: Gotham; 
}

用來定位合適的形式附近的段落。

來源

2016-01-02 Sebi Maleș

你能更準確？ –

由於您在發佈和評論部分使用'div'，因此默認情況下您的評論div將低於帖子div。目前還不清楚你想達到什麼目的。反正看看這個[Pen]（http://codepen.io/anon/pen/EPZNKq）。 – Arkantos

取出height: 20px從.Parg（我建議使用小寫類定義）

如果你想彌補「後」和margin-left評論表單，只是兩者在<div>包裹並應用margin-left: 30%到它。

代碼片段

.title { 
 
    text-align: center; 
 
    font-family: Fipps; 
 
} 
 
.post { 
 
    text-align: center; 
 
} 
 
.Parg { 
 
    position: relative; 
 
    margin-left: 30%; 
 
    width: 800px; 
 
    font-family: Gotham; 
 
}

<div class="post"> 
 
    <a class="titles">Lorem ipsum</a> 
 
    <br> 
 
    <p class="Parg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam. Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui. Duis rhoncus velit nec est condimentum feugiat. Donec aliquam augue nec gravida 
 
    lobortis. Nunc arcu mi, pretium quis dolor id, iaculis euismod ligula. Donec tincidunt gravida lacus eget lacinia. Cras et dui mollis, tempus velit placerat, sodales tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
 
    himenaeos. Quisque et venenatis sapien. Maecenas sem diam, lacinia in ipsum et, fermentum rutrum lacus. Nulla facilisis, arcu ac facilisis tincidunt, tortor est congue ligula, eu adipiscing quam ligula ut purus. Suspendisse at gravida dolor. Vestibulum 
 
    eget odio in massa luctus imperdiet. Donec consequat orci a diam pellentesque mollis. Nulla nec varius dui. Aliquam erat volutpat. Nunc at viverra nisi, id lobortis quam. Aenean hendrerit fermentum nibh nec lobortis. Ut sit amet magna orci. Integer 
 
    sit amet varius ipsum. Ut mattis ullamcorper fermentum. Integer pretium felis sit amet urna volutpat, ac elementum ante interdum. Nam auctor eget quam vitae fringilla. Vestibulum quam orci, porttitor in nisl aliquam, placerat gravida ligula. Quisque 
 
    sed malesuada velit. Proin vulputate velit sed cursus feugiat. Mauris scelerisque nulla ut mauris iaculis, a euismod nulla eleifend. Maecenas consequat interdum nibh, at tincidunt justo commodo eget. Pellentesque ut pharetra tellus, eu pulvinar ligula. 
 
    Duis ac nisl rhoncus, ultrices eros sed, consequat orci. Maecenas volutpat lacus vitae arcu semper, a bibendum urna viverra. Suspendisse congue dolor nec commodo volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia 
 
    Curae; Vivamus commodo vulputate elementum. Nam sed urna non tellus vulputate molestie sit amet at sapien. Vivamus massa odio, dignissim ac ante at, euismod dignissim risus. Cras ut blandit lorem. Maecenas nisl quam, cursus nec aliquet facilisis, 
 
    mattis id augue. Fusce semper odio et gravida interdum.</p> 
 
    <br> 
 
</div> 
 
<div> 
 
    <form> 
 
    <input type="text" name="username" placeholder="Nickname" required /> 
 
    <br> 
 
    <br> 
 
    <input type="text" name="body" placeholder="Write your comment here" required /> 
 
    <br> 
 
    <br> 
 
    <input type="submit" name="register" value="Add comment" /> 
 
    </form> 
 
</div>

來源

2016-01-02 13:00:50

如何在尺寸相對的元素下定位表單？

回答

相關問題