使用CSS

Question

我知道这是一个愚蠢的问题，但我正在努力解决以下问题

这是我的一个菜单按钮。我希望div代表图标（带圆圈标记为红色）位于按钮左侧，文本位于右侧（名称（蓝色）位于描述上方（紫色））。顺便说一句，我将有很多这些按钮，我希望它们出现在列（块）中。

我目前的问题是图标div（红色）和文字div（绿色虚线）不会内嵌。 我的HTML是：

<style>
    .HomeMenuNavbarButton {
        text-decoration: none;
        color : black;
        border-style:outset;
        border-width:4px;
        border-radius:15px;
        display:block;
        padding:4px;
    }
    .circle {
        width: 50px;
        height: 50px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
        border-color: black;
        border-style: dashed;
        display: inline-block;
        vertical-align: top;
    }
    </style>
    <div class="container">
        <div class="row">
            @foreach (var node in Model.Nodes)
            {
                if (!(node.IsRootNode) && node.Children.Any())
                {
                    <div class="col-md-4">
                    <button type="button" style="display:inline;" class="btn btn-info" data-toggle="collapse" data-target="@("#relatedNavList" + node.Title) ">@node.Title</button>
                    <div id="@("relatedNavList" + node.Title)" class="collapse">
                            @foreach (var child in node.Children)
                            {
                                <div class="HomeMenuNavbarButton" style="display:block;">
                                    <div style="background-color:red;display:inline">
                                        <div class="circle">
                                        </div>
                                    </div>
                                    <div style="border-color: green; border-style: dashed; display:inline-block">
                                        <div style="background-color:blue">@(child.Title)</div>
                                        <div style="background-color:purple">@(child.Description)</div>
                                    </div>
                                </div>
                            }
                    </div>
                </div>
            }
        }
    </div>
</div>

Answer 1

如果您想在 CSS 中并排显示内容，最简单的方法是使用 flexbox 。尝试将display : flex;添加到HomeMenuNavBar班级。

Here是有关Mozilla团队中 flexbox 的完整文档。

Answer 2

使用定义为flexbox的包装器

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 150px;
}

.circle {
  height: 25px;
  width: 25px;
  border: medium dashed darkgray;
  border-radius: 50%;
}

button {
  background: dodgerblue;
  color: white;
  border-radius: 3px;
  border: thin solid lightblue;
  padding: 0.5em;
}

<div class="wrapper">
  <button>Button</button>
  <div class="circle"></div>
  <span>Text</span>
</div>

Answer 3

您只需使用display：按钮元素上的inline-block

即可

.elementButton
{
  display:inline-block;
}

.circle {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    border-color: black;
    border-style: dashed;
    display: inline-block;
    vertical-align: top;
}

.HomeMenuNavbarButton
{
  display:block;
  margin:5px;
}

<div class="HomeMenuNavbarButton">

    <div class="circle elementButton">
    </div>

    <div class="elementButton">
        <div>Title one</div>
        <div>Content</div>
    </div>
</div>
<div class="HomeMenuNavbarButton">

    <div class="circle elementButton">
    </div>

    <div class="elementButton">
        <div >Title two</div>
        <div>Content</div>
    </div>
</div>