Question

我在按钮和段落/文字的位置方面遇到问题。它们以交错的方式放置。我希望它们被放置在一条直线上。您可以在下面的图片中看到问题。此外，我希望按钮位于“hr”行的末尾正上方，与段落放在行的左侧上方的方式相同。有什么想法解决方案？

HTML：

<!--Wrapper div-->
    <div id="wrapper">

        <!--Inbox list and button to add a card-->
        <div id="inboxList" class="cellContainer">
            <br style="line-height: 23px" />
            <p class="paragraph">In-Box</p>
            <!--Button to add a Card-->
            <div id="btnAddCard" style="float: right;"><span          
            style="color: #10e20e; font-size:140%" >+</span> Add Card...</div>
            <hr class="fancy-line" />
            <br />

            <!--Card div-->
            <div id="userAddedCard"> <br/>
                <div>

                </div>
            </div>
        </div>

CSS：

#btnAddCard {
    background: #ffffff;
    padding: 0.7% 2% 1% 2%; /* Button padding */
    font-size: 95%;
    font-weight: bold;
    display: inline;
    text-decoration: none; /* Remove default underline style from hyperlink */
    color: #888888;
    border: 1px solid #cccccc;
    border-radius: 7px; /* Full rounder corners */
    font-family: Arial, sans-serif;
    cursor: pointer;
    vertical-align: bottom;
}


#btnAddCard {
    background: rgb(255,255,255); /* Old browsers */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

.paragraph {
    padding-left:7%;
    display:inline;
    font-family:cursive;
    font:bolder;
    font-size:larger;

}

hr.fancy-line {
    height: 1.8px;
    background-color: blueviolet;
    width:85%;

}

Answer 1

将p.paragraph更改为<div.paragraph>并添加margin-left:7%并从font-size删除140% #btnAddCard似乎解决了问题

JSFiddle

<强>更新

我只是将内容放在div中，给它适当的边距并突出显示它的底部边框而不是<hr>，这样孩子们就会完美对齐，就像这样{{{{{{ 3}}

附注：请避免使用内联样式和标记，例如<br> <center>等，这样可以简化维护JSFiddle

交错文本和按钮的问题

1 个答案: