小编Sti*_*ers的帖子

http://jsbin.com/nuzazefuwi/1/edit?html,css,output

在上面的链接中,文本框应该只有10px而不是宽度为152px.

这是代码:

.input {
  width: 100%;
  box-sizing: border-box;
}

.cont {
  padding: 2px;
}

.main {
  position: absolute;
  border: 1px solid black;
  min-width: 15px;
}

<div class='main'>
  <div class='cont'>
    <input type="text" class='input' />
  </div>
</div>
<br/>
<br/>
<br/> the textbox should have 10px

看起来输入在.main min-width大于156px 后才开始获得正确的宽度.

我想用CSS实现以下效果:

这个星形图标是一种字体.我想用百分比来定义橙色背景的宽度,所以50%应该是恒星的完美一半.

现在,我做了以下事情:

<div class="container">
    <span class="star star-under fa fa-star"></span>
    <span class="star star-over fa fa-star"></span>
</div>

和:

.container
{
    font-size: 200px;
    height: 300px;
    position: relative;
    width: 100%;
}

.star
{
    display: inline-block;
    left: 0;
    position: absolute;
    top: 0;
}

.star-under
{
    color: #ddd;
}

.star-over
{
    color: #f80;
    overflow: hidden;
    width: 30%;
}

问题是我需要提供宽度和高度才能使用%的宽度.如果我跳过容器的宽度和高度,它什么都不显示,因为它包含绝对定位的子项.

这个%值是在服务器端计算的,所以我宁愿保持内联,如下所示:

<span class="star star-over fa fa-star" style="width: 62%;"></span>

最灵活的方法是什么？最灵活的我指的是没有必要提供任何宽度和高度的那个.

为什么边界不显示tbody在下面？我尝试rules="groups"了边框,但只是在两个tbody部分之间,它已折叠.

table.sectioned tbody {
  border: 2px solid black;
  border-collapse: separate;
  border-spacing: 4px;
}

<table class="sectioned">
  <tbody>
    <tr><td colspan="2"><b>General Data</b></td></tr>
    <tr><td>Tail Number</td><td>N0809021</td></tr>
    <tr><td>Type of Ownership</td><td>personal</td></tr>
    <tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
    <tr><td>Year of Manufacture</td><td>1999</td></tr>
    <tr><td>Use of Aircraft</td><td>private</td></tr>
    <tr><td>Start Date</td><td></td></tr>
    <tr><td>Policy Length</td><td>6 months</td></tr>
  </tbody>
  <tbody>
    <tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
    <tr><td>Manufacturer</td><td></td></tr>
    <tr><td>Model</td><td></td></tr>
    <tr><td>Engine Make</td><td></td></tr>
    <tr><td>Number of Seats</td><td></td></tr>
  </tbody>
</table>

我有一个使用CSS flexbox缩放到可用高度的DIV.在这个DIV中是一个我想在两个维度上与DIV一起缩放的图像.这意味着它应该按比例缩放,保持其纵横比,并且小于相应DIV尺寸的尺寸应该居中.

我可以使图像跟随DIV的宽度,但不是高度.因此,肖像图像从DIV边界逃脱.

这是一个证明问题的jsFiddle.

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
}

<div class="container">
  <div class="box"></div>
  <div class="box" style="background: pink;">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>

如何垂直居中包含在文本中的文本<span>？在<span>必须min-height的45px.这是我想象的:

--------                  -------
text

                --->      text   


--------                  -------

我尝试了本文中的vertical-align方法.他们都没有工作

我一直在使用.navbar-headerBootstrap类作为我的导航栏很长一段时间,但从来没有想过要为什么而烦恼.我在网上搜索了为什么我们使用它但没有找到任何解释.有人可以解释它的目的是什么吗？

<nav class="navbar navbar-inverse ">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">
        Website Name
      </a>
    </div>  
  </div>
</nav>

我有两个孩子div 20%和80%.最后一个包含嵌套的spans,如果文本不适合同一行,则它将在单行上移动到下一行(默认行为).

HTML:

<div class="post-short-footer">
   <div class="read-more-post"></div>
   <div class="post-short-meta-container">
      <span class="posted-on"><i class="fa fa-calendar" aria-hidden="true">Some text</i></span>
      <span class="cat-links"><i class="fa fa-folder-open-o" aria-hidden="true"></i>Some text</span>
      <span class="comments-link"><i class="fa fa-comment-o" aria-hidden="true"></i></span>
   </div>
</div>

CSS:

.post-short-footer {
    display: table;
    width: 100%;
}
.read-more-post {
    height: 100%;
    display: table-cell;
    vertical-align: middle;    
    width: 20%;
    padding: 0.6em 0.6em;
    border-radius: 0.3em;
    text-align: center;
    border: 1px solid #3b9be5;
}
.post-short-meta-container {
    display: table-cell;
    padding-left: 1em;
    width: 80%;
    line-height: 100%;
    vertical-align: middle;
    height: 100%;
}

但是如果跨度中的文本不适合行移动整个跨度到下一行,我需要实现下一个结果.

我已经尝试过:

.post-short-meta-container span { …

我需要在输入中放置图标以创建新用户.对于那些了解前端代码的人来说,这可能是一项非常容易的任务.但是我没有.这是线框,然后我显示我的代码.

线框

如你看到的.输入左侧有图标.现在我在我的目录中有SVG,准备好了,我只需要知道如何将它们放在输入中.这是表单的代码

形成

<label clas="name-label">
  <%= f.text_field :name, placeholder: "Name", class: "form-labels" %>
</label>

<label class="email-label">
  <%= f.text_field :email, placeholder: "Email", class: "form-labels" %>
</label> 

所以我有一个占位符,其中包含一个当前只打印该字符串的字符串.我需要把图标放在我认为的范围内吗？这是我用于图标的CSS.

CSS

.icon-email {
  background-image: image-url('email-field.svg');
}

.icon-name {
 background-image: image-url('name-field.svg');
}

有没有办法将这些类放在占位符中？

您好我正在尝试执行简单的任务,即使用bottom而不是top来上下移动div以产生浮动/悬停效果.所以从.bottom: 63px到bottom: 400px

我是CSS和关键帧的新手!你可能会说,但这是我尝试过的,它似乎没有做任何事情:

.piece-open-space #emma {
    background-image: url('images/perso/Emma.png?1418918581');
    width: 244px;
    height: 299px;
    position: absolute;
    display: block;
    width: 244px;
    background-image: none;
    position: absolute;
    left: 2149px;
    bottom: 63px;
    -webkit-animation: MoveUpDown 50s linear infinite;
}

@-webkit-keyframes MoveUpDown {
    from {
        bottom: 63px;
    }
    to { 
        bottom: 400px;
    }
}

更新

问题是它不会循环是我正在寻找的目标它达到400px然后立即回到63px如何让它达到400px然后回到63px它给出了无限循环的效果"徘徊/浮动".

在使用WordPress时,是否可以像在CSS中一样使用CSS获取背景图像.我试过这样做,但它不起作用.

background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");