1

我试图在 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不会将输入框放在同一级别。如果我可以添加一个环绕元素，那么最简单的方法是，但没有人可以做到这一点。

有小费吗？

4

2 回答 2

2

用这个 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。:afterinput

为什么？

因为在元素内容:before之前添加，并且在元素内容之后添加，而不是在元素本身之前或之后。:after

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

希望这可以帮助。

编辑 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

但是这种解决方法在我看来有点糟糕。

最好的祝福

于 2012-09-24T08:41:03.183 回答
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！

于 2012-09-24T08:50:33.790 回答