文章/答案/技术大牛

发布

社区首页 >问答首页 >我可以在一个“小类”中嵌套一个<p>吗？

问我可以在一个“小类”中嵌套一个<p>吗？
EN

Stack Overflow用户

提问于 2019-12-24 08:42:35

回答 1查看 76关注 0票数 0

我已经合并了一堆HTML标记来得到我想要的东西，它工作得很好。然而，我想知道它是否“正确”。

更新:我不认为这是“正确的”请看这个链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

因此，为了稍微改变我的问题，我只需将"p“标记更改为"span”，对吗？这应该会让它更正确。

我指的是“小类”中的嵌套段落标记。

代码如下：

<div class="card b-1 hover-shadow mb-20">
    <div class="media card-body">
        <div class="media-left pr-12">
            <img class="avatar avatar-xl no-radius" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="...">
        </div>
        <div class="media-body">
            <div class="mb-2">
                <span class="fs-20 pr-16"> XHossein Shams</span>
            </div>
            <small class="fs-16 fw-300 ls-1">


                <input type="checkbox" class="read-more-state" id="post-1" />

                <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>

                <label for="post-1" class="read-more-trigger"></label>

            </small>
        </div>
        <div class="media-right text-right d-none d-md-block">
            <p class="fs-14 text-fade mb-12"><i class="fa fa-map-marker pr-1"></i> Menlo Park, CA</p>
            <span class="text-fade"><i class="fa fa-money pr-1"></i> $60 per hour</span>
        </div>
    </div>
    <footer class="card-footer flexbox align-items-center">
        <div>
            <strong>Cost of Tool:</strong>
            <span>Free &amp; Paid</span>
        </div>
        <div class="card-hover-show">
            <a class="btn btn-xs fs-10 btn-bold btn-info" href="#">Tool Home</a>
            <a class="btn btn-xs fs-10 btn-bold btn-primary" href="#" data-toggle="modal" data-target="#modal-contact">Contact</a>
        </div>
    </footer>
</div>

我认为这一行是正确的吗：

<small class="fs-16 fw-300 ls-1">

^这基本上是一个"div“-对吗？

下面是CSS，如果它有用的话：

.pr-12 {
    padding-right: 12px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.b-1 {
    border: 1px solid #ebebeb !important;
}

.card {
    border: 0;
    border-radius: 0;
    /* margin-bottom: 30px; */
    -webkit-transition: .5s;
    transition: .5s;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.media {
    padding: 16px 12px;
    -webkit-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.media .avatar {
    flex-shrink: 0;
}

.no-radius {
    border-radius: 0 !important;
}

.avatar-xl {
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 1.25rem;
}

.avatar {
    position: relative;
    display: inline-block;
    /* width: 36px;
    height: 36px; */
    width: 70px;
    height: 70px;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    background-color: #f5f6f7;
    color: #8b95a5;
    text-transform: uppercase;
}

img {
    max-width: 100%;
}

img {
    vertical-align: middle;
    border-style: none;
}

.mb-2 {
    margin-bottom: .5rem!important;
}

.fs-20 {
    font-size: 20px !important;
}

.pr-16 {
    padding-right: 16px !important;
}

.ls-1 {
    letter-spacing: 1px !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fs-16 {
    font-size: 12px !important;
}

.media-body>* {
    margin-bottom: 0;
}

small, time, .small {
    font-family: Roboto,sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #8b95a5;
}

.fs-14 {
    font-size: 14px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.text-fade {
    color: rgba(77,82,89,0.7) !important;
}

.card-footer:last-child {
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}

.card-footer {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77,82,89,0.07);
    color: #8b95a5;
    padding: 10px 20px;
}

.flexbox {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.align-items-center {
    -ms-flex-align: center!important;
    align-items: center!important;
}

.card-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.125);
}
/*

.card-footer {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77, 82, 89, 0.07);
    color: #8b95a5;
    padding: 10px 20px
} */

.card-footer>*:last-child {
    margin-bottom: 0
}

.hover-shadow {
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.11);
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.11)
}

.fs-10 {
    font-size: 10px !important;
}

谢谢!

html

css

回答 1

Stack Overflow用户

发布于 2019-12-24 09:22:10

你能，当然。HTML非常灵活，你可以编写一大堆无效的标记，并且看起来(目前)可以逃脱惩罚。这并不意味着你应该这么做。

你应该编写有效的html，因为你有一个更强有力的保证，它现在和将来都将/应该一致地工作。对于无效的代码，您不会得到这样的保证。您还应该编写语义上有效的HTML，因为它对文档的结构和意图提供了更好的提示。

你不应该做的是根据它给你的默认样式选择标签/元素。经典的例子是当h2是正确的标签，但是需要更小的字号时，使用h3。使用正确的标签，然后适当地设置样式。

在您的例子中，aside看起来很合适，但是如果不知道文档的完整上下文，就很难判断。

.pr-12 {
  padding-right: 12px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.b-1 {
  border: 1px solid #ebebeb !important;
}

.card {
  border: 0;
  border-radius: 0;
  /* margin-bottom: 30px; */
  -webkit-transition: .5s;
  transition: .5s;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
}

.media {
  padding: 16px 12px;
  -webkit-transition: background-color .2s linear;
  transition: background-color .2s linear;
}

.media {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.media .avatar {
  flex-shrink: 0;
}

.no-radius {
  border-radius: 0 !important;
}

.avatar-xl {
  width: 64px;
  height: 64px;
  line-height: 64px;
  font-size: 1.25rem;
}

.avatar {
  position: relative;
  display: inline-block;
  /* width: 36px;
    height: 36px; */
  width: 70px;
  height: 70px;
  line-height: 36px;
  text-align: center;
  border-radius: 100%;
  background-color: #f5f6f7;
  color: #8b95a5;
  text-transform: uppercase;
}

img {
  max-width: 100%;
}

img {
  vertical-align: middle;
  border-style: none;
}

.mb-2 {
  margin-bottom: .5rem!important;
}

.fs-20 {
  font-size: 20px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.ls-1 {
  letter-spacing: 1px !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fs-16 {
  font-size: 12px !important;
}

.media-body>* {
  margin-bottom: 0;
}

small,
time,
aside,
.small {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #8b95a5;
}

.fs-14 {
  font-size: 14px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.text-fade {
  color: rgba(77, 82, 89, 0.7) !important;
}

.card-footer:last-child {
  border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}

.card-footer {
  background-color: #fcfdfe;
  border-top: 1px solid rgba(77, 82, 89, 0.07);
  color: #8b95a5;
  padding: 10px 20px;
}

.flexbox {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.align-items-center {
  -ms-flex-align: center!important;
  align-items: center!important;
}

.card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, .03);
  border-top: 1px solid rgba(0, 0, 0, .125);
}


/*

.card-footer {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77, 82, 89, 0.07);
    color: #8b95a5;
    padding: 10px 20px
} */

.card-footer>*:last-child {
  margin-bottom: 0
}

.hover-shadow {
  -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.11);
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.11)
}

.fs-10 {
  font-size: 10px !important;
}

<div class="card b-1 hover-shadow mb-20">
  <div class="media card-body">
    <div class="media-left pr-12">
      <img class="avatar avatar-xl no-radius" src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="...">
    </div>
    <div class="media-body">
      <div class="mb-2">
        <span class="fs-20 pr-16"> XHossein Shams</span>
      </div>
      <aside class="fs-16 fw-300 ls-1">


        <input type="checkbox" class="read-more-state" id="post-1" />

        <p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>

        <label for="post-1" class="read-more-trigger"></label>

      </aside>
    </div>
    <div class="media-right text-right d-none d-md-block">
      <p class="fs-14 text-fade mb-12"><i class="fa fa-map-marker pr-1"></i> Menlo Park, CA</p>
      <span class="text-fade"><i class="fa fa-money pr-1"></i> $60 per hour</span>
    </div>
  </div>
  <footer class="card-footer flexbox align-items-center">
    <div>
      <strong>Cost of Tool:</strong>
      <span>Free &amp; Paid</span>
    </div>
    <div class="card-hover-show">
      <a class="btn btn-xs fs-10 btn-bold btn-info" href="#">Tool Home</a>
      <a class="btn btn-xs fs-10 btn-bold btn-primary" href="#" data-toggle="modal" data-target="#modal-contact">Contact</a>
    </div>
  </footer>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59462669

复制

相似问题

问我可以在一个“小类”中嵌套一个<p>吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在一个“小类”中嵌套一个<p>吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以在一个“小类”中嵌套一个<p>吗？
EN