我想在同一行显示按钮和标签。但不同行上有多个按钮。我怎么能这样做.Help将不胜感激。 按钮和标签应该并排，下一行按钮和标签。 我哪里错了？
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.round-button
{
width:20px;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
</body>
</html>
答案 0 :(得分：3)
由于您的html代码中需要进行一些结构更改，因此您应该考虑以适当的方式重新调整代码，而不是在代码中进行调整。你可以尝试下面的代码。
.button {
background: #4679BD;
border-radius: 50%;
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
}
.wrapper {
float: left;
width: 100%;
margin-bottom: 10px;
}
a {
float: left;
}<div class="wrapper">
<a class="button"></a><span>Button 1</span>
</div>
<div class="wrapper">
<a class="button"></a><span>Button 2</span>
</div>
答案 1 :(得分：3)
使用display:table-cell会为您提供预期的输出。
<span>
<div class='round-button'><div class='round-button-circle'></div></div>
<label class="lblname" >edit</label>
</span>
<span >
<div class='round-button'><div class='round-button-circle'></div></div>
<label class="lblname">edit</label>
</span>
CSS：
.round-button
{
width:20px;
display: table-cell;
}
.lblname{
display: table-cell;
padding: 0 5px;
vertical-align: middle;
}
<强> Working Fiddle
注意：尽量避免提供内联css。
答案 2 :(得分：0)
首先，您不能使用span（内联元素）包装div（块元素） - HTML无效
问题是你不能使按钮div round-button（块元素）内联或内联块或浮点数也可以。
由于您不需要将label is inline element显示给inline。而是需要更改按钮div以作为内联。
<div class="wrap">
<div class='round-button' style="display:inline-block">
<div class='round-button-circle'></div>
</div>
<label style='display:inline;'>edit</label>
</div> <!--/ END OF WRAP -->
我使用内联块设置round-button div的样式，因为它会显示内联以及维护块元素css属性。
答案 3 :(得分：0)
您可以尝试浮动：
ptr答案 4 :(得分：0)
只需删除<br>之间的<span>
并在下面添加到css
span {
display:inline-block;
}
喜欢即。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" />
<style>
span {
display:inline-block;
}
.new_line {
width:780px;
margin:0 auto;
height:50px;
}
.new_line ul li {
list-style-type:none;
float:left;
padding:10px 22px ;
}
.new_line ul li img {
float:left;}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.round-button
{
width:20px;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
<span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
</body>
</html>
答案 5 :(得分：0)
检查一下 希望有所帮助 的段
.round-button
{
width:60px;
}
.round-button-circle {
background: #4679bd none repeat scroll 0 0;
border-radius: 50%;
box-shadow: 0 0 3px gray;
height: 20px;
overflow: hidden;
width: 20px;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}<span >
<div class='round-button'>
<label style="float: left; margin-right: 10px;">edit</label>
<div class='round-button-circle'></div>
</div>
</span>
<span >
<div class='round-button'>
<label style="float: left; margin-right: 10px;">edit</label>
<div class='round-button-circle'></div>
</div>
</span>