将项目列表放在div框中

Question

我是HTML和CSS的新手。我目前正在尝试将项目列表（编辑|删除|查看|测试）放入我的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和（编辑|删除|审核|参加测试）在同一行

Answer 1

您可以将display: flex;与justify-content: space-between;

一起使用

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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>

Answer 4

你必须像你这样在你的品牌文字上漂浮

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

Answer 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;
}

Answer 6

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

示例 - 1

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

＆＃13;

＆＃13;

p tag

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

示例 - 2 将float添加到<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>后的输出，

＆＃13;

＆＃13;

p tag

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;