Question

在我website上，我在屏幕的最右侧有一个评论部分。我希望评论与评论部分的右侧内联。我认为浮动权利会做到这一点，而且确实如此。正如你所看到的那样它可以再去几个像素，所以它是内联的。我的CSS看起来像这样：

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e){

    GridViewRow row = e.Row;
    // Intitialize TableCell list
    List<TableCell> columns = new List<TableCell>();
    foreach (DataControlField column in GridView1.Columns)
    {
        //Get the first Cell /Column
        TableCell cell = row.Cells[0];
        // Then Remove it after
        row.Cells.Remove(cell);
        //And Add it to the List Collections
        columns.Add(cell);
    }

    // Add cells
    row.Cells.AddRange(columns.ToArray());
}

和HTML是这样的：

        #addCommentButton{
            float:right;
        }

我不知道为什么会这样，我从来没有发生过这种情况。任何帮助将不胜感激。

Answer 1

或者，这样做：

.comment, #comment_area, #comment_form {
    width: 300px;
    box-sizing: border-box;

}

该区域的计算宽度比声明的像素大几个像素

使用box-sizing：border-box;，我们可以将框模型更改为曾经是“古怪”的方式，其中一个元素的指定宽度和高度不受填充或边框的影响。

来源：https://css-tricks.com/box-sizing/

Answer 2

尝试将表单上的填充设置为0px

form#comment_form {
    width: 300px;
    padding: 0px;
}

正如我所看到的那样，你的按钮位置正确，但是形状的填充将它向左推动几个像素。

Answer 3

这会奏效。将文本区域宽度更改为294px;补偿左右2px填充和1px边距。

<textarea class="input" id="comment_area" placeholder="Comment here" tabindex="2" style="width: 294px;"></textarea>

浮动权不正常

3 个答案: