Question

在我的视图中，我试图水平对齐以下内容（因此会有复选框，然后是条形图并且全部停留在一行上）：

在我看来：

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var redis = require('redis');
var request = require('request');

server.listen(5000);

io.on('connection', function (socket) {
    console.log("new client connected " + socket.id);

    socket.on('disconnect', function() {
        var socket_id = socket.id;
        console.log('client disconnected :C '+socket_id);

        var url_request = 'http://example.com/play-session/close?socket_id='+socket_id;
        request.get(url_request); // this line fix it
    });
});

CSS中的我的Div：

 <div class="tableHomework2">
            <%= link_to homework do %>
              <div class="teachers linkable">
                    <%= check_box_tag "homework[id][]", homework.id, checked = false, class: "narrowtr" %>
                    <div class="progress-meter-interest-mobile horizTranslate" data-bar-length=" <%= homework.average_interest * 100 / 5 %>%"><%= homework.average_interest %></div>
                    <font size="1"><%= homework.significance.sig_option %></font>&emsp;&ensp;
                    <font size="1"><strong><%= formatted_date(homework.due)%></strong></font>
                </div>
                <% end %>
                <% end %>
                <% end %>

如果我从视图中取出CSS栏，它会很好地垂直对齐。条形图显示在图像中。我想知道如何用包含该栏的div来完成这项工作？我尝试在该div中设置max-width，但这不起作用。

有什么建议吗？感谢。

RE：复选框

页面来源

.teachers {
   border-bottom: 20px;
   background-color: white;
   top: 0px;
   margin:0px;  
   padding: 0px 2px 2px 3px;    
   border-width: 2px;
   border-bottom-width:1px;
   border-bottom-color:Grey;
   border-bottom-style: solid;
   width: 100%;
}

.linkable{
    color: black
}

.progress-meter-interest-mobile{
  background-color: #FFD733;
  width: 10px;
  height: 20px;
}

.progress-meter-interest-mobile.horizTranslate {
  -webkit-transition: 3s;
  -moz-transition: 3s;
  -ms-transition: 3s;
  -o-transition: 3s;
  transition: 3s;
}

Answer 1

我认为您正在寻找的是display属性。您可以像使用它一样使用它：

.example {
  display: inline-block;
}

Answer 2

可以像这样实现：

.teachers .progress-meter-interest-mobile, .teachers input[type="checkbox"]{
    display:inline-block;
    vertical-align:top
}

HTML / CSS如何水平对齐这些项目？

2 个答案: