如何将表单放在尺寸相对的元素下面?

时间:2016-01-02 12:21:32

标签: html css

我正在建立一个博客,并希望在帖子下面发表评论。帖子的维度是相对的(帖子是段落),我希望我的评论部分(表格)正好在它下面。如果我做这样的事情:

HTML

   private void lstGenresValueChanged(javax.swing.event.ListSelectionEvent evt) {                                       

        Object geselecteerdeObject = lstGenres.getSelectedValue();
        Genre geselecteerdGenre = (Genre) geselecteerdeObject;
        if (geselecteerdeObject != null) {

            txtGenreNaam.setText(geselecteerdGenre.getGenreNaam());
            System.out.println(geselecteerdGenre.getGenreNaam());
            ophalenGenresLijst();

        }
        if (lstGenres.isSelectionEmpty()) {
            btnVerwijderen.setEnabled(false);
            btnWijzigen.setEnabled(false);
        } else {
            btnVerwijderen.setEnabled(true);
            btnWijzigen.setEnabled(true);
        }


    } 

CSS

if (lstPersonen.getSelectedIndices().length == 0) {

将表格放在段落附近。

1 个答案:

答案 0 :(得分:1)

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>