Question

我实际上使用了四个按钮来设置为Inline，该按钮应覆盖页面的整个宽度，但是我面临着使同一行中的第四个按钮出现问题。

我为他们提供了25％的CSS宽度，因为我希望它们覆盖所有页面，并且我已经尝试了所有方法，但是无法正常工作，因此我删除了Knowledge下方的所有CSS属性

.tabButton {
  width: 25%;
  height: 90%;
  padding: 0px;
  margin: 0px;
  border: 0px;
  outline: none;
  font-size: 16px;
  float: inline;
}

.buttonForTab button:hover {
  cursor: pointer;
}

.tabButton:focus,
.tabButton a:focus {
  outline: none;
}

<div class="buttonForTab m-0 p-0">
  <span><button class="tabButton"><a>Button 1</a></button></span>
  <span><button class="tabButton"><a>Button 2</a></button></span>
  <span><button class="tabButton"><a>Button 3</a></button></span>
  <span><button class="tabButton"><a>Button 4</a></button></span>

</div>

我只想看到它们全部内联，并覆盖整个宽度

Answer 1

float: inline是无效的属性。它应该是float: left。为了保持一致性，您应该添加另一个属性，特别是如果您不使用引导程序box-sizing: border-box之类的框架。如果您想进一步了解float和box-sizing，请考虑阅读这些精彩的文章。

对于float：All About Floats和float | MDN

对于box-sizing：Box Sizing和box-sizing | MDN

.tabButton {
  width: 25%;
  height: 90%;
  padding: 0px;
  margin: 0px;
  border: 0px;
  outline: none;
  font-size: 16px;
  float: left;
  box-sizing: border-box;
}

.buttonForTab button:hover {
  cursor: pointer;
}

.tabButton:focus,
.tabButton a:focus {
  outline: none;
}

<div class="buttonForTab m-0 p-0">
  <span><button class="tabButton"><a>Button 1</a></button></span>
  <span><button class="tabButton"><a>Button 2</a></button></span>
  <span><button class="tabButton"><a>Button 3</a></button></span>
  <span><button class="tabButton"><a>Button 4</a></button></span>

</div>

实现相同布局的另一种现代且更简便的方法是使用flex。要使用flex，您必须将父项的display属性声明为flex。使用flex可以使用width，但是最好使用flex-basis，我已经使用过。我将flex-basis设置为24％，然后将justify-content: space-between设置为父级。这将在按钮之间创建一个不错的均匀空间。如果您不希望这样做，则可以删除justify-content: space-between并设置flex-basis: 25%。另外请注意，我已经从您的按钮中删除了span元素包装器，这对我来说似乎不必要。

要了解有关flex的详细信息，请阅读以下文章：A Complete Guide to Flexbox和Basic concepts of flexbox

.buttonForTab {
  display: flex;
  justify-content: space-between;
}

.tabButton {
  flex-basis: 24%;
  height: 90%;
  padding: 0px;
  margin: 0px;
  border: 0px;
  outline: none;
  font-size: 16px;
  box-sizing: border-box;
}

.buttonForTab button:hover {
  cursor: pointer;
}

.tabButton:focus,
.tabButton a:focus {
  outline: none;
}

<div class="buttonForTab m-0 p-0">
  <button class="tabButton"><a>Button 1</a></button>
  <button class="tabButton"><a>Button 2</a></button>
  <button class="tabButton"><a>Button 3</a></button>
  <button class="tabButton"><a>Button 4</a></button>
</div>

Answer 2

您必须使用float：left，因为float：inline是无效属性。还提供了span的所有属性，因此，由于span是一个内联元素，因此它将内联，并且您给出了25％的span宽度，该宽度将为0。希望对您有帮助

Answer 3

希望这会有所帮助：）

 final Uri sArtworkUri = 
 Uri.parse("content://media/external/audio/albumart");
 Uri albumArtUri = ContentUris.withAppendedId(sArtworkUri, albumID);

 ContentResolver resolver = c.getContentResolver();  

 ContentValues valuesAlbum = new ContentValues();
   valuesAlbum.put(currentAlbumID, albumID);
   valuesAlbum.put(currentAlbumData, file_path);

   //Update albumArt.
   resolver.delete(albumArtUri, null,null);
   resolver.insert(sArtworkUri, valuesAlbum);

.tabButton {
  width: 25%;
  height: 90%;
  padding: 0px;
  margin: 0px;
  border: 0px;
  outline: none;
  font-size: 16px;
  display:inline-block;
      float: left;
      
}

.buttonForTab button:hover {
  cursor: pointer;
}

.tabButton:focus,
.tabButton a:focus {
  outline: none;
}

Answer 4

buttonForTab span {
  width: 25%;
  height: 90%;
  padding: 0px;
  margin: 0px;
  border: 0px;
  outline: none;
  font-size: 16px;
      float: left;
      display:inline-block;
}

.buttonForTab button:hover {
  cursor: pointer;
}

.tabButton:focus,
.tabButton a:focus {
  outline: none;
}

<div class="buttonForTab m-0 p-0">
  <span><button class="tabButton"><a>Button 1</a></button></span>
  <span><button class="tabButton"><a>Button 2</a></button></span>
  <span><button class="tabButton"><a>Button 3</a></button></span>
  <span><button class="tabButton"><a>Button 4</a></button></span>

</div>

立即检查

无法内联所有按钮，看起来与NavBar相似

4 个答案: