将项目列表放在div框中

Question

我是新来的HTML和CSS。我目前正在尝试将项目列表（编辑|删除|评论|考试）放到我的分区框中，但我无法弄清楚为什么它总是在框外。

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

编辑：我想测试1和（编辑|删除|评论|拍摄测试）是在同一行

Answer 1

更改显示inline-block的到表。它会工作。我不知道为什么，但我在我的项目中使用它很多。

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

你只需要左浮动对你的品牌的文字，像这样

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

Answer 3

您需要设置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>

Answer 4

请尝试这个

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 5

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

示例 - 1

我已经分配background color给p tag，你可以看到，它需要full width，因为你已经分配text-align left在parent div和浮动到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后 输出，

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

Answer 6

可以使用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>