在 div 框中放置项目列表答案

【问题标题】：Place list of items in div box在 div 框中放置项目列表
【发布时间】：2017-03-12 10:21:43
【问题描述】：

我是 HTML 和 CSS 的新手。我目前正在尝试将项目列表 (Edit|Delete|Review|Take Test) 放入我的 div 框中，但我无法弄清楚为什么它总是在框外。

.action-container {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: white;
  border: 1px solid rgba(74, 74, 74, 0.075);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  color: #204056;
  text-align: left;
  font-size: 18px;
  font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}

#menu>li.sub ul {
  position: absolute;
  left: 0px;
  float: right;
}

#menu li.sub ul li a {
  display: inline;
}

#menu {
  text-align: right;
}

li {
  display: inline-block;
}

<div class="action-container">
  <p>Test 1</p>
  <ul id="menu">
    <li class="sub"><a href="#">Edit</a> | </li>
    <li class="sub"><a href="#">Delete</a> | </li>
    <li class="sub"><a href="#">Review</a> | </li>
    <li class="sub"><a href="#">Take Test</a></li>
  </ul>
</div>

编辑：我希望 Test1 和 (Edit|Delete|Review|Take Test) 在同一行

【问题讨论】：

请移除高度：70px;
谢谢。如何使它们在同一条线上？删除高度后，列表在“测试1”下方
请看我的回答。

标签： html css

【解决方案1】：

您可以将display: flex; 与justify-content: space-between; 一起使用

.action-container {
  margin-bottom: 20px;
  background: white;
  border: 1px solid rgba(74, 74, 74, 0.075);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  color: #204056;
  font-size: 18px;
  font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
  display: flex;
  justify-content: space-between;
  padding: 1em;
}

#menu, .action-container p {
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="action-container">
  <p>Test 1</p>
  <ul id="menu">
    <li class="sub"><a href="#">Edit</a> | </li>
    <li class="sub"><a href="#">Delete</a> | </li>
    <li class="sub"><a href="#">Review</a> | </li>
    <li class="sub"><a href="#">Take Test</a></li>
  </ul>
</div>

【讨论】：

超级先生，我喜欢你的回答@Michael Coker

【解决方案2】：

您需要设置height:auto 并将p 的样式更改为float:Left。

.action-container {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(74, 74, 74, 0.075);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  color: #204056;
  text-align: left;
  font-size: 18px;
  font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}

.action-container p {
  float: left;
  max-width: 70%;
}

#menu>li.sub ul {
  position: absolute;
  left: 0px;
  float: right;
}

#menu li.sub ul li a {
  display: inline;
}

#menu {
  text-align: right;
  padding-right: 10px;
}

li {
  display: inline-block;
}

<div class="action-container">
  <p>Test 1</p>
  <ul id="menu">
    <li class="sub"><a href="#">Edit</a> | </li>
    <li class="sub"><a href="#">Delete</a> | </li>
    <li class="sub"><a href="#">Review</a> | </li>
    <li class="sub"><a href="#">Take Test</a></li>
  </ul>
</div>

【讨论】：

【解决方案3】：

将显示内联块更改为表格。它会起作用的。我不知道为什么，但我在我的项目中经常使用它。

.action-container {
    display:table;
    padding-left: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: white;
    border: 1px solid rgba(74,74,74,0.075);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    color: #204056;
    text-align: left;
    font-size: 18px;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}

#menu > li.sub ul {
    position: absolute;
    left: 0px;
    float: right;
}

#menu li.sub ul li a {
    display: inline;
}

#menu{
    text-align:right;
}

li{
    display:inline-block;
}

<div class="action-container">
  <p>Test 1</p>
  <ul id="menu">
    <li class="sub"><a href="#">Edit</a> | </li>
    <li class="sub"><a href="#">Delete</a> | </li>
    <li class="sub"><a href="#">Review</a> | </li>
    <li class="sub"><a href="#">Take Test</a></li>
  </ul>
</div>

【讨论】：

【解决方案4】：

您只需像这样在品牌文字上向左浮动

<p style="float:left">Test 1</p>

【讨论】：

【解决方案5】：

请试试这个

HTML

<div class="action-container">
       <p>Test 1</p>
           <ul id="menu">
               <li class="sub"><a href="#">Edit</a> | </li>
               <li class="sub"><a href="#">Delete</a> | </li>
               <li class="sub"><a href="#">Review</a> | </li>
               <li class="sub"><a href="#">Take Test</a></li>
            </ul>
  </div>

CSS

.action-container {
    display:inline-block;
    padding-left: 20px;
    margin-bottom: 20px;
    width: 100%;
    line-height: 70px;
    background: white;
    border: 1px solid rgba(74,74,74,0.075);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    color: #204056;
    text-align: left;
    font-size: 18px;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}
.action-container p { float: left;width: 70%; }
#menu > li.sub ul {
    position: absolute;
    left: 0px;
    float: right;
}

#menu li.sub ul li a {
    display: inline;
}

#menu{
   float: right;
margin-right: 10px;
}

li{
    display:inline-block;
}

【讨论】：

【解决方案6】：

那是因为p tag 见下面的例子，

示例 - 1

我已将background color 分配给p tag，您可以看到它需要full width，因为您在parent div 中分配了text-align left 并浮动到ul tag 和float to right，但是要使在框内对齐，您也必须将 float 分配给 p tag。

.action-container {
    display:inline-block;
    padding-left: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: white;
    border: 1px solid rgba(74,74,74,0.075);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    color: #204056;
    text-align: left;
    font-size: 18px;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}
.action-container  > p{
  background:#ccc;
}
#menu > li.sub ul {
    position: absolute;
    left: 0px;
    float: right;
}

#menu li.sub ul li a {
    display: inline;
}

#menu{
    text-align:right;
}

li{
    display:inline-block;
}

<div class="action-container">
       <p>Test 1</p>
           <ul id="menu">
               <li class="sub"><a href="#">Edit</a> | </li>
               <li class="sub"><a href="#">Delete</a> | </li>
               <li class="sub"><a href="#">Review</a> | </li>
               <li class="sub"><a href="#">Take Test</a></li>
            </ul>
  </div>

示例 - 2 给p tag加上float后的输出，

.action-container {
    display:inline-block;
    padding-left: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    background: white;
    border: 1px solid rgba(74,74,74,0.075);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    color: #204056;
    text-align: left;
    font-size: 18px;
    font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}
.action-container  > p{
  float:left;
}
#menu > li.sub ul {
    position: absolute;
    left: 0px;
    float: right;
}

#menu li.sub ul li a {
    display: inline;
}

#menu{
    text-align:right;
}

li{
    display:inline-block;
}

<div class="action-container">
       <p>Test 1</p>
           <ul id="menu">
               <li class="sub"><a href="#">Edit</a> | </li>
               <li class="sub"><a href="#">Delete</a> | </li>
               <li class="sub"><a href="#">Review</a> | </li>
               <li class="sub"><a href="#">Take Test</a></li>
            </ul>
  </div>

【讨论】：