i class 的位置受另一个 class 的影响

Question

我想在用户评论旁边添加一个很棒的字体图标。所以它看起来像这样：

这就是 html 和 css 在一起的样子，没有任何评论 out/deleted。

html:

    <div class="commentsWindow">
        <div class="output" id="output">
            <h6 class="username">The Spider</h6>
            <h6 class="date">2 hours ago</h6>
            <i class="fas fa-ellipsis-v icon" id="myicon"></i>
            <p class="comments">People like commenting </p>
        </div>
    </div>

css:


.output {
    margin: 30px 0px 0px 50px;
    width: 550px;
}

.output h6,
output i {
    display: inline-block;
}

.output .username {
    margin: 0px 10px 0px 0px;
    text-transform: capitalize;
}

.output .date {
    color: #193B59;
    font-size: 14px;
}

.icon {
    width: 30px;
    height: 30px;
    border: none;
    cursor: pointer;
    float: right;
}

.output p {
    font-size: 14px;
    word-break: break-word;
    white-space: pre-line;
}

好了，我先把这段注释掉，让一些代码在js中生效：花括号之间的所有内容都被注释掉了。

    <div class="commentsWindow">
        <div class="output" id="output">
            {{!-- <h6 class="username">The Spider</h6>
            <h6 class="date">2 hours ago</h6>
            <i class="fas fa-ellipsis-v icon" id="myicon"></i>
            <p class="comments">People like commenting </p> --}}
        </div>
    </div>

现在转到我的 js 文件：这是我用来输出用户评论的代码：

js:

function loadcomments() {
    fetch('http://localhost:5502' + '/get_messages')
        .then(response => {
            if (response.ok) {
                console.log('success')
                console.log(response);
            } else {
                console.log('failure')
            }
            return response.json();
        })
        .then(function(data) {

            io.emit("new_message", data)
            io.on("new_message", function(data) {
                console.log("Server says", data);
                output.innerHTML = '';
                data.forEach(function(user) {

                    var newUser = document.createElement("div");
                    var newName = document.createElement("h6");
                    var newDate = document.createElement("h6");
                    var newMessage = document.createElement("p");
                    var newIcon = document.createElement("i");

                    newUser.className = 'output';
                    newName.className = 'username';
                    newDate.className = 'date';
                    newIcon.setAttribute("class", "fas fa-ellipsis-v icon");
                    newMessage.className = 'comments';

                    var display_username = document.createTextNode(user.username);
                    var display_date = document.createTextNode(user.date);
                    var display_comments = document.createTextNode(user.comments);

                    newName.appendChild(display_username);
                    newDate.appendChild(display_date);
                    newMessage.appendChild(display_comments);

                    newUser.appendChild(newName);
                    newUser.appendChild(newDate);
                    newUser.appendChild(newMessage);
                    newUser.appendChild(newIcon);
                    output.appendChild(newUser);

                    console.log(data);

                }).catch(function(error) {
                    console.log(error)

                })

现在这是我得到的输出：

这是前后并排的照片：

只是 html 和 css：

Html、css 和 js：

这个很棒的字体图标应该与 CSS 中指定的用户名和日期内联，但是一旦我使用 js，它就会消失 window。

看起来 p class 也影响了我的 i class 不知道为什么。

在 js 代码中，这里是要查看的特定部分，关于 i class 或许还有 p class:

js:

  var newUser = document.createElement("div");
                    var newName = document.createElement("h6");
                    var newDate = document.createElement("h6");
                    var newMessage = document.createElement("p");
                    var newIcon = document.createElement("i");

                    newUser.className = 'output';
                    newName.className = 'username';
                    newDate.className = 'date';
                    newIcon.setAttribute("class", "fas fa-ellipsis-v icon");
                    newMessage.className = 'comments';

                    var display_username = document.createTextNode(user.username);
                    var display_date = document.createTextNode(user.date);
                    var display_comments = document.createTextNode(user.comments);

                    newName.appendChild(display_username);
                    newDate.appendChild(display_date);
                    newMessage.appendChild(display_comments);

                    newUser.appendChild(newName);
                    newUser.appendChild(newDate);
                    newUser.appendChild(newMessage);
                    newUser.appendChild(newIcon);
                    output.appendChild(newUser);

我希望我已经把这个问题说清楚了。无法弄清楚我做错了什么。提前致谢。我对此也很陌生。感谢任何帮助。

注意：这个问题是从上一个问题编辑而来的，以便更好地说明问题，所以一些评论来自原始问题。

Answer 1

我不确定问题出在哪里；但我想这可能就是您想要的？

改变；

newIcon.className = 'icon';

成为；

newIcon.className = 'fas fa-ellipsis-v icon';

我假设正在制作元素，但您的 FontAwesome 图标没有出现，因为在您的代码中创建元素的地方没有分配适当的 FontAwesome 类。

看看你的代码，你只是在创建一个这样的元素；

<i class="icon"></i>

进行我建议的更改，您现在将创建一个类似这样的元素；

<i class="fas fa-ellipsis-v icon"></i>

编辑后进行编辑：查看您的CSS；

.output h6,
output i {
    display: inline-block;
}

我想你的意思是；

.output h6,
.output i {
    display: inline-block;
}

根据我的评论，here is a JSFiddle 我把它们放在一起了。看来你的 CSS for .output .date {...} 也可能会乱七八糟。所以你可以像这样添加 margin: 0px;

.output .date {
    color: #193B59;
    font-size: 14px;
    margin: 0px; /** remove this and watch it go out of line **/
}

Answer 2

你可以这样实现：

我建议将您的图标放在 h6 元素中，这将使它与该行内联。 newDate.appendChild(newIcon);
由于图标是浮动的，您需要扩展该父元素（根据您的需要进行调整，使用 px 或 %）：

.日期{ 宽度：50%； }

var newUser = document.createElement("div");
var newName = document.createElement("h6");
var newDate = document.createElement("h6");
var newMessage = document.createElement("p");
var newIcon = document.createElement("i");

newUser.className = 'output';
newName.className = 'username';
newDate.className = 'date';
newIcon.setAttribute("class", "fa fa-address-book icon");
newMessage.className = 'comments';

var display_username = document.createTextNode("test user");
var display_date = document.createTextNode("2020");
var display_comments = document.createTextNode("test comment");

newName.appendChild(display_username);
newDate.appendChild(display_date);
newMessage.appendChild(display_comments);

newUser.appendChild(newName);
newUser.appendChild(newDate);
newDate.appendChild(newIcon);
newUser.appendChild(newMessage);
output.appendChild(newUser);

.output {
  margin: 30px 0px 0px 50px;
  width: 350px;
}

.output h6,
output i {
  display: inline-block;
}

.output .username {
  margin: 0px 10px 0px 0px;
  text-transform: capitalize;
}

.output .date {
  color: #193B59;
  font-size: 14px;
}
.date{
width: 50%;
}

.icon {
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  float: right;
}

.output p {
  font-size: 14px;
  word-break: break-word;
  white-space: pre-line;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="commentsWindow">
  <div class="output" id="output">

  </div>
</div>

另请注意，您在已添加消息后添加子图标并将图标推送到下方，您可以尝试在按摩前添加图标（重新排列 appendChild 的顺序）并查看是否适用你（h6 元素的边距为 32px，所以对图标也这样做以使其成为“内联”）：

var newUser = document.createElement("div");
var newName = document.createElement("h6");
var newDate = document.createElement("h6");
var newMessage = document.createElement("p");
var newIcon = document.createElement("i");

newUser.className = 'output';
newName.className = 'username';
newDate.className = 'date';
newIcon.setAttribute("class", "fa fa-address-book icon");
newMessage.className = 'comments';

var display_username = document.createTextNode("test user");
var display_date = document.createTextNode("2020");
var display_comments = document.createTextNode("test comment");

newName.appendChild(display_username);
newDate.appendChild(display_date);
newMessage.appendChild(display_comments);

newUser.appendChild(newName);
newUser.appendChild(newDate);
newUser.appendChild(newIcon);
newUser.appendChild(newMessage);
output.appendChild(newUser);

.output {
  margin: 30px 0px 0px 50px;
  width: 350px;
}

.output h6,
output i {
  display: inline-block;
}

.output .username {
  margin: 0px 10px 0px 0px;
  text-transform: capitalize;
}

.output .date {
  color: #193B59;
  font-size: 14px;
}


.icon {
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  float: right;
  margin-top: 32px;
}

.output p {
  font-size: 14px;
  word-break: break-word;
  white-space: pre-line;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="commentsWindow">
  <div class="output" id="output">

  </div>
</div>

i class 的位置受另一个 class 的影响

Position of i class is affected by another class

html

javascript

css

dom

font-awesome