與CSS

定位元素，我知道這是愚蠢的問題，但我有以下問題與CSS

這是我的菜單按鈕中的一個掙扎。我想要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>

來源

2017-08-04 user7803907

你能否提供你生成的標記而不是服務器代碼？然後，你會得到一個解決方案後，你應該調整相應的標記回剃刀代碼。 –

當你想在CSS顯示並排東西側，最簡單的方法是使用Flexbox的。嘗試將display : flex;添加到您的HomeMenuNavBar課程中。

Here是來自Mozilla團隊的關於flexbox的完整文檔。

來源

2017-08-04 08:43:45

使用包裝定義爲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>

來源

2017-08-04 08:47:19 Gerard

路易斯的建議是不是一樣？ – user7803907

你可以做，只是顯示：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>

來源

2017-08-04 09:00:03

回答

相關問題