Question

我试图在css中的元素之前添加一个中断而不更改下面的html代码。我一直在这个论坛上寻找答案，但无法让它在不同的浏览器中运行。

HTML（不可更改，因为它是joomla组件的一部分）

    <span id="mod_login_usernametext-map"> <label for="mod_login_username-map"> Email </label> </span>

    <span><input type="text" name="username" id="mod_login_username-map" class="inputbox-map" /></span>

    <-- here i want the break -->

    <span id="mod_login_passwordtext-map"><label for="mod_login_password-map">Password</label></span>&nbsp;<span><input type="password" name="passwd" id="mod_login_password-map" class="inputbox-map" />

    <-- and break here -->
    <input type="checkbox" name="remember" id="mod_login_remember-map" class="inputbox-map" value="yes" /> <span id="mod_login_remembermetext-map"><label for="mod_login_remember-map">Remember me</label></span>

我尝试了#mod_login_passwordtext-map:before { content: '\A';white-space: pre-line; }，但在firefox，chrome罚款方面表现不佳..

使用display: break并不会将输入框放在同一级别上。如果我只是可以添加一个包裹元素，那么最简单的就是这样但是没有可以做到这一点..

任何提示？

Answer 1

尝试使用此css：

#mod_login_passwordtext-map:before {
  content: '\A';
  white-space: pre;
}

演示：codepen

适用于FF和Chrome。

祝你好运

修改

这也会为您的登录按钮添加一个中断+对齐两个input字段：

#mod_loginform-map #mod_login_passwordtext-map:before, #mod_loginform-map .cbLoginButtonSpan:before { content: '\A'; white-space: pre; } #mod_login_usernametext-map label, #mod_login_passwordtext-map label { display: inline-block; width: 6em; }

演示：codepen

编辑2：

无法将:before和:after个伪类添加到input个元素。

为什么？

因为在元素的内容之前添加了:before，并且在元素的之后添加了:after < / strong>元素本身之前或之后。

输入元素没有内容，只有一个值。

希望这有帮助。

编辑3：

要使用CSS获取记住我 input的新行，我只能看到一种方法。

#mod_loginform-map #mod_login_passwordtext-map:before, #mod_loginform-map .cbLoginButtonSpan:before, #mod_loginform-map span:nth-child(4):after { content: '\A'; white-space: pre; }

演示：codepen

但是这种解决方法在我看来有点蹩脚。

祝你好运

Answer 2

为什么不将#mod_login_passwordtext-map设为display:block？或者甚至在你的标记上做一些漂浮/清算。

http://jsfiddle.net/TUGCX/1/

#mod_login_passwordtext-map {
    clear:both;
}

span {
    float:left;
}

/* You don't need that. */
input {
    display:inline-block;
    margin-left:5px;
}

注意： display: break无效css！

在元素之前创建一个break

2 个答案: