logo标签列表

将按钮和标签显示在同一行

htmlcssinline
4
我希望将按钮和标签显示在同一行，但是多个按钮应显示在不同的行上。我该怎么办？非常感谢您的帮助。 按钮和标签应该并排显示，下一组按钮和标签应该显示在下一行。 请问我哪里做错了？
 <!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>
6个回答
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;
}

示例链接

注意: 尽量避免使用内联样式。

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>

0

首先，您不能使用span（内联元素）包装div（块级元素）- 无效的HTML

问题在于，您没有使按钮div round-button（块级元素）成为内联或内联块，或者浮动也可以解决。

由于，因此您不需要将其显示为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 元素的 inline-block 样式，因为它既可以显示为行内元素，又可以保持块级元素的 CSS 属性。

0
你可以尝试使用浮动：
.round-button {
    width: 20px;
    float: left;
    clear: left;
}
这并没有提供问题的答案。如果你想对作者进行批评或请求澄清，请在他们的帖子下方留言 - 你总是可以评论自己的帖子，一旦你获得足够的声望，你就能够评论任何帖子。- 来自审查 - Mathias
@Mathias 为什么它没有提供答案，如果我建议的 CSS 实现了所要求的确切行为？ - user5591717
0

只需删除两个 <span> 标签之间的 <br>，并将以下内容添加到 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>
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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接