Question

我正在尝试创建一个简单的预订解决方案，该解决方案将显示为看起来像一张桌子，但是在预订的时间内有彩色矩形浮动。实际数据库，数据输入屏幕都集成在我的解决方案中，我只需要显示数据。

我需要做的第一件事就是用资源名称+ 24小时绘制网格。经过大量研究后，我决定在列表中使用浮动div，因为我可以使用绝对位置在资源预订时定位彩色矩形。

我正在尝试绘制第一行，其他人应该重复这一行。我有以下代码，有没有办法可以强制它在一条水平线上显示整个'li'？目前，无论水平线上有多少空间，它似乎都会在第二行的晚上8点到晚上11点进行换行。我可以在一条线上漂浮的div的数量是否有限制？是否还有一种方法可以确保如果窗口大小变小，div不会回绕到第二页，它们会保持刚性为一行。

很想在这个表中使用表格，但是研究表明，在具有不同z-index的绝对位置上覆盖彩色div将在一个div层上比在表格上更好地工作。

非常感谢

namespace MyApp.Controllers
{
    public class FormController : ApiController
    {
        private FormAsAServiceDbContext db = new FormAsAServiceDbContext();

        // ...

        // PUT: api/Form/5
        [ResponseType(typeof(void))]
        public async Task<IHttpActionResult> PutForm(int id, Form form)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != form.Id)
            {
                return BadRequest();
            }

            db.Entry(form).State = System.Data.Entity.EntityState.Modified;

            try
            {
                await db.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!FormExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // ...
    }
}

#container {
  overflow: auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
  display: inline;
}
.resource-name {
  border: 1px solid #d9d9d9;
  width: 120px;
  height: 25px;
  float: left;
}
.time-col {
  border: 1px solid #d9d9d9;
  width: 30px;
  height: 25px;
  float: left;
}

Answer 1

浮动div没有限制，但它们会自动换行。如果您希望它们全部在一行中，最简单的方法是在它们的容器上使用white-space: nowrap;并使用<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <style> #container { overflow:auto; } ul { list-style-type: none; margin: 0; padding: 0; } li { white-space: nowrap; } .resource-name { border: 1px solid #d9d9d9; width: 120px; height:25px; display: inline-block; } .time-row { display: inline-block; } .time-col { border: 1px solid #d9d9d9; width: 30px; height:25px; display: inline-block; } </style> </head> <body> <div id="container"> <ul> <li> <div class="resource-name">Room A1</div> <div class="time-row"> <div class="time-col">12a</div> <div class="time-col">1a</div> <div class="time-col">2a</div> <div class="time-col">3a</div> <div class="time-col">4a</div> <div class="time-col">5a</div> <div class="time-col">6a</div> <div class="time-col">7a</div> <div class="time-col">8a</div> <div class="time-col">9a</div> <div class="time-col">10a</div> <div class="time-col">11a</div> <div class="time-col">12p</div> <div class="time-col">1p</div> <div class="time-col">2p</div> <div class="time-col">3p</div> <div class="time-col">4p</div> <div class="time-col">5p</div> <div class="time-col">6p</div> <div class="time-col">7p</div> <div class="time-col">8p</div> <div class="time-col">9p</div> <div class="time-col">10p</div> <div class="time-col">11p</div> </div> </li> </ul> </div> </body> </html>：

div#footer

Answer 2

只需将width:100%添加到li即可。这将是大屏幕中的一行，然后它将根据屏幕进行调整，因为您float .time-col

段

#container {
  overflow: auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  display: inline;
  width:100%
}
.resource-name {
  border: 1px solid #d9d9d9;
  width: 120px;
  height: 25px;
  float: left;
}
.time-col {
  border: 1px solid #d9d9d9;
  width: 30px;
  height: 25px;
  float: left;
}

<div id="container">
  <ul>
    <li>
      <div class="resource-name">Room A1</div>
      <div class="time-row">
        <div class="time-col">12a</div>
        <div class="time-col">1a</div>
        <div class="time-col">2a</div>
        <div class="time-col">3a</div>
        <div class="time-col">4a</div>
        <div class="time-col">5a</div>
        <div class="time-col">6a</div>
        <div class="time-col">7a</div>
        <div class="time-col">8a</div>
        <div class="time-col">9a</div>
        <div class="time-col">10a</div>
        <div class="time-col">11a</div>
        <div class="time-col">12p</div>
        <div class="time-col">1p</div>
        <div class="time-col">2p</div>
        <div class="time-col">3p</div>
        <div class="time-col">4p</div>
        <div class="time-col">5p</div>
        <div class="time-col">6p</div>
        <div class="time-col">7p</div>
        <div class="time-col">8p</div>
        <div class="time-col">9p</div>
        <div class="time-col">10p</div>
        <div class="time-col">11p</div>
      </div>
    </li>
  </ul>
</div>

如果您希望始终在一条水平线上而不管视口，请使用display:table/-cell

段

#container {
  overflow: auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  display:table;
  width:100%;
  table-layout:fixed;
}
.resource-name {
  border: 1px solid #d9d9d9;
  width: 120px;
  height: 25px;
  display:table-cell;
}
.time-col {
  border: 1px solid #d9d9d9;
  width: 30px;
  height: 25px;
  display:table-cell;
}

<div id="container">
  <ul>
    <li>
      <div class="resource-name">Room A1</div>
      <div class="time-row">
        <div class="time-col">12a</div>
        <div class="time-col">1a</div>
        <div class="time-col">2a</div>
        <div class="time-col">3a</div>
        <div class="time-col">4a</div>
        <div class="time-col">5a</div>
        <div class="time-col">6a</div>
        <div class="time-col">7a</div>
        <div class="time-col">8a</div>
        <div class="time-col">9a</div>
        <div class="time-col">10a</div>
        <div class="time-col">11a</div>
        <div class="time-col">12p</div>
        <div class="time-col">1p</div>
        <div class="time-col">2p</div>
        <div class="time-col">3p</div>
        <div class="time-col">4p</div>
        <div class="time-col">5p</div>
        <div class="time-col">6p</div>
        <div class="time-col">7p</div>
        <div class="time-col">8p</div>
        <div class="time-col">9p</div>
        <div class="time-col">10p</div>
        <div class="time-col">11p</div>
      </div>
    </li>
  </ul>
</div>

Answer 3

如果您不关心旧浏览器，请使用Flex框。易于操作，始终在单行（默认情况下），许多选项。我没有触及你的HTML，但它可能很短。

＆＃13;

ul {
  margin: 0;
  padding: 0;
}
li {
  display: flex;
}
.resource-name {
  border: 1px solid #d9d9d9;
  flex: 0 0 120px;
  height: 25px;
}
.time-row {
  flex: 1 0 auto;
  display: flex;
}
.time-col {
  border: 1px solid #d9d9d9;
  flex: 0 0 30px;
  height: 25px;
}

＆＃13;

<div id="container">
  <ul>
    <li>
      <div class="resource-name">Room A1</div>
      <div class="time-row">
        <div class="time-col">12a</div>
        <div class="time-col">1a</div>
        <div class="time-col">2a</div>
        <div class="time-col">3a</div>
        <div class="time-col">4a</div>
        <div class="time-col">5a</div>
        <div class="time-col">6a</div>
        <div class="time-col">7a</div>
        <div class="time-col">8a</div>
        <div class="time-col">9a</div>
        <div class="time-col">10a</div>
        <div class="time-col">11a</div>
        <div class="time-col">12p</div>
        <div class="time-col">1p</div>
        <div class="time-col">2p</div>
        <div class="time-col">3p</div>
        <div class="time-col">4p</div>
        <div class="time-col">5p</div>
        <div class="time-col">6p</div>
        <div class="time-col">7p</div>
        <div class="time-col">8p</div>
        <div class="time-col">9p</div>
        <div class="time-col">10p</div>
        <div class="time-col">11p</div>
      </div>
    </li>
  </ul>
</div>

＆＃13;

剩下的最大元素数量？

3 个答案:

段

段