Question

我有这个HTML：

<div id="content">
    <h1 id="prompt">What's on your mind?</h1>

    <form action="post.php" method="POST" id="message-form">
        <textarea placeholder="Type in anything you want to share. Anything at all."></textarea>
        <p>Feel free to type up to <span id="character-count">2000 characters</span>, or to use <a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a> formatting.</p>
        <input type="submit" class="submit button" value="Share" />
        <br class="clearfix" />
    </form>
</div>

和这个CSS：

/* CSS Reset
-------------------------------------------*/
* {
    margin: 0;
    padding: 0;
}

.clearfix {
    clear: both;
}

/* UI Elements
-------------------------------------------*/
.button {
    background-color: #ccc;
    background-image: -webkit-linear-gradient(white, #ccc);
    background-image: -moz-linear-gradient(white, #ccc);
    background-image: -ms-linear-gradient(white, #ccc);
    background-image: -o-linear-gradient(white, #ccc);
    background-image: linear-gradient(white, #ccc);
    border: 1px solid #999;
    border-radius: 10px;
    color: #333;
    cursor: pointer;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 13px;
    outline: none;
    padding: 3px 8px;
    text-decoration: none;
}

.button:hover {
    border-color: #666;
}

.button:active {
    background-color: #bbb;
    background-image: -webkit-linear-gradient(#ccc, white);
    background-image: -moz-linear-gradient(#ccc, white);
    background-image: -ms-linear-gradient(#ccc, white);
    background-image: -o-linear-gradient(#ccc, white);
    background-image: linear-gradient(#ccc, white);
}

/* Content
-------------------------------------------*/
#content {
    margin: 10px;
}

/* Prompt
-------------------------------------------*/
#prompt {
    color: #888;
    font-weight: normal;
}

/* Message Box
-------------------------------------------*/
#message-form {
    width: 600px;
}

#message-form textarea {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: block;
    font-family: Georgia, Times New Roman, Times, Serif;
    font-size: 16px;
    min-height: 100px;
    outline: none;
    padding: 5px;
    resize: vertical;
    width: 100%;
    -webkit-transition: border-color 0.25s ease-in-out;
    -moz-transition: border-color 0.25s ease-in-out;
    -ms-transition: border-color 0.25s ease-in-out;
    -o-transition: border-color 0.25s ease-in-out;
    transition: border-color 0.25s ease-in-out;
}

#message-form textarea:hover {
    border-color: #666;
}

#message-form textarea:focus {
    border-color: #3bf;
    box-shadow: 0 0 5px #3bf;
}

#message-form p {
    color: #666;
    float: left;
    font-size: 13px;
    margin: 3px;
}

#message-form .submit {
    float: right;
    margin-right: 0;
}

我想要完成的是在特定数量的空间内向右浮动一个元素。这是有效的，但按钮右侧有大约10个像素的空间，看起来并不存在！它不是从父元素填充，也不是按钮上的边距，据我所知......所以它来自哪里？下面是问题的图像，完整代码可以在https://github.com/minitech/MiniTicket找到。的 Here's a demo on jsFiddle, too.

很抱歉代码过载，但I can't seem to reproduce the problem in a simple way。

Answer 1

请注意，设置width: 100%和任意数量的水平padding都会导致您的元素的宽度超过100％（除非它是input元素，其中应用了填充在元素内部。）

在您的情况下，textarea宽度为610px。提交按钮正确地浮动到600px宽度容器的最右侧。

请参阅：http://jsfiddle.net/Wexcode/KX7wd/1/

替换textarea中的填充：http://jsfiddle.net/Wexcode/KX7wd/2/

浮动上不存在右边距：右边项目？

1 个答案: