Question

我想将我的PHP文件中的“编辑”和“删除”按钮放入HTML文件中的div中，但是这些按钮将显示在页面的右上角。

我尝试使用position: absolute和position: relative，但这不起作用

CSS

body {
    background-color: #edf0f2;
}

textarea {
    display: inline-block;
    width: 630px;
    height: 120px;
    background-color: #fff;
    border-color: #5bb112;
    margin-top: 10px;
    margin-left: 15px;
    position: relative;
    resize: none;
}

.logout {
    display: inline-block;
    float: left;
    position: absolute;
    margin-top: 27px;
    margin-right: 20px;
    margin-left: 130px;
}

.login {
    display: inline-block;
    float: right;
    position: relative;
    margin-top: 27px;
    margin-right: 20px;
    margin-left: 130px;
}

/*-------Divs---------*/

#maindiv {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
}

#maindiv #first {
    max-width: 45%;
    margin-left: 50px;
}

#maindiv #second {
    max-width: 45%;
    margin-left: 200px;
}

/*-------Commentbox---------*/

div.comment-box {
    width: 630px;
    padding-top: 5px;
    margin-bottom: 4px;
    background-color: #fff;
    border-radius: 1px;

    border: 1px solid #5bb112;
}

.comment-box  {
    font-family: arial;
    font-size: 14px;
    line-height: 16px;
    color: #282828;
    font-weight: 100;
    margin-left: 15px;
    margin-top: 15px;
    padding: 5px 5px 5px 5px;
    position: relative;
}

/*-------Changelog---------*/


div.changelog-box {
    width: 630px;
    padding-top: 5px;
    margin-bottom: 4px;
    background-color: #fff;
    border-radius: 1px;
    position: relative;
    border: 1px solid #5bb112;
}

.changelog-box  {
    font-family: arial;
    font-size: 14px;
    line-height: 16px;
    color: #282828;
    font-weight: 100;
    margin-left: 15px;
    margin-top: 15px;
    padding: 5px 5px 5px 5px;
}


/*-------Buttons---------*/

button {
    width: 100px;
    height: 30px;
    background-color: #5bb112;
    border: none;
    color: #e2e2e2;
    font-family: arial;
    font-weight: 400;
    cursor: pointer;
    margin-bottom: 19px;
    margin-left: 15px;
    margin-top: 3px;
}

form .delete-form {
    position: relative;
}

.edit-form {
    position: absolute;
    top: 3px;
    right: 3px;
}

.edit-form button {
    width: 40px;
    height: 20px;
    color: #282828;
    background-color: #fff;
    opacity: 0.7;
}

.edit-form button:hover {
    opacity: 1;
}

.delete-form {
    position: absolute;
    top: 3px;
    right: 58px;
}

.delete-form button {
    width: 40px;
    height: 20px;
    color: #282828;
    background-color: #fff;
    opacity: 0.7;
}

.delete-form button:hover {
    opacity: 1;
}

HTML

<div id='maindiv'>
    <div id='first'>


<?php
    if (isset($_SESSION['id'])) {
        echo "<form method='POST' action='".setComments($conn)."'>
            <input type='hidden' name='uid' value='".$_SESSION['id']."'> 
            <input type='hidden' name='date' value='".date('Y-m-d')."'> 
            <textarea name='comments'></textarea><br>
            <button type='submit' name='commentSubmit'> Comment </button>
        </form>";
}

getComments($conn);
?>
</div>

<div id='second'>

<

<?php
    if (isset($_SESSION['id'])) {
        echo "<form method='POST' action='".setChangelog($conn)."'>
            <input type='hidden' name='uid' value='".$_SESSION['id']."'> 
            <input type='hidden' name='date' value='".date('Y-m-d')."'> 
            <textarea name='changelog'></textarea><br>
            <button type='submit' name='changelogSubmit'> Comment </button>
        </form>";
}


getChangelog($conn);
?>
</div></div>

PHP


function getComments($conn) {
    $sql = "SELECT * FROM comments";
    $result = $conn->query($sql);
    while ($row = $result->fetch_assoc()) {
        $id = $row['uid'];
        $sql2 = "SELECT * FROM user WHERE id='$id'";
        $result2 = $conn->query($sql2);
        if ($row2 = $result2->fetch_assoc()) {
            echo "<div class='comment-box'>";
            echo $row2['uid']."<br>";
            echo $row['date']."<br>";
            echo nl2br($row['message']);
            echo "</div>";
            if (isset($_SESSION['id'])) {
                if ($_SESSION['id'] == $row2['id']) {
                    echo    "<form class='delete-form' method='POST' action='".deleteComments($conn)."'>
                        <input type='hidden' name='cid' value='".$row['cid']."'> 
                        <button type='submit'name='commentDelete'>Delete</button>
                    </form>
                    <form class='edit-form' method='POST'action='editComment.php'>
                        <input type='hidden' name='cid' value='".$row['cid']."'> 
                        <input type='hidden' name='uid' value='".$row['uid']."'> 
                        <input type='hidden' name='date' value='".$row['date']."'> 
                        <input type='hidden' name='message' value='".$row['message']."'> 
                        <button>Edit</button>
                    </form>";
                } 
            }
        }
    }

}   



function EditComments($conn) {
    if (isset($_POST['commentSubmit'])) {
        $cid = $_POST['cid'];
        $uid = $_POST['uid'];
        $date = $_POST['date'];
        $message = $_POST['message'];

        $sql = "UPDATE comments SET message='$message' WHERE cid='$cid'";
        $result = $conn->query($sql);
        header("Location:index.php");
    }
}

function deletecomments($conn) {
    if (isset($_POST['commentDelete'])) {
        $cid = $_POST['cid'];

        $sql = "DELETE FROM comments WHERE cid='$cid'";
        $result = $conn->query($sql);

        header("Location:index.php");
    }
}

function getChangelog($conn) {
    $sql = "SELECT * FROM general";
    $result = $conn->query($sql);
    while ($row = $result->fetch_assoc()) {
        $id = $row['uid'];
        $sql2 = "SELECT * FROM user WHERE id='$id'";
        $result2 = $conn->query($sql2);
        if ($row2 = $result2->fetch_assoc()) {
            echo "<div class='changelog-box'>";
            echo $row2['uid']."<br>";
            echo $row['date']."<br>";
            echo nl2br($row['message']);
            echo "</div>";
            if (isset($_SESSION['id'])) {
                if ($_SESSION['id'] == $row2['id']) {
                    echo    "<form class='delete-form' method='POST' action='".deleteChangelog($conn)."'>
                        <input type='hidden' name='cid' value='".$row['cid']."'> 
                        <button type='submit'name='changelogDelete'>Delete</button>
                    </form>
                    <form class='edit-form' method='POST' action='editChangelog.php'>
                        <input type='hidden' name='cid' value='".$row['cid']."'> 
                        <input type='hidden' name='uid' value='".$row['uid']."'> 
                        <input type='hidden' name='date' value='".$row['date']."'> 
                        <input type='hidden' name='message' value='".$row['message']."'> 
                        <button>Edit</button>
                    </form>";
                } 
            }
        }
    }

}

Answer 1

位置：绝对是要走的路。并且父元素应位于position：relative。

<div class="comment-box">
  <p>comment</p>
  <button>delete</button>
</div>

.comment-box{
  border: solid 1px black;
  position: relative;
}

button {
  position: absolute;  
  top: 0;
  right: 0;
}

如何将这个按钮放入#second div？

1 个答案: