在HTML和CSS中创建内联跨度类

其实我是新来的UI设计，我不能准确地创建这个按钮的image.This是到目前为止我的代码。

.white-button { 
 
    width: 500px; 
 
    height: 100px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #eaeaea; 
 
    text-align: justify; 
 
} 
 

 
.green-button { 
 
    width: 500px; 
 
    height: 100px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #eaeaea; 
 
    text-align: justify; 
 
}

<span style="display: inline;"> 
 
     <span class="white-button">$ 50 
 
     </span> 
 
<span class="green-button">Give Now 
 
     </span> 
 
</span> 
 
<font style="color:#20A1D4; text-align:left"> 
 
    <i><br>Why give $5o?</i> 
 
</font>

谁能帮我！谢谢。

来源

2017-09-15 Chathuri Fernando

，如果你发布你在说什么的图片可能更容易为“调试”。以及您正在使用的浏览器。 – theGleep

究竟，像哪个图像？ –

为什么你使用'span'来创建一个按钮和一个文本输入？ – Turnip

下面是使用inputs提供语义的解决方案。

.text-input { 
 
    width:80px; 
 
    height:29px; 
 
    border-radius:4px; 
 
    border:1px solid #ccc; 
 
    padding:4px; 
 
    font-size:10pt; 
 
    color:#777; 
 
    font-weight:bold; 
 
} 
 

 
.green-button { 
 
    width: 88px; 
 
    height: 40px; 
 
    border-radius:4px; 
 
    margin-left:8px; 
 
    background-color:#1cbc2d; 
 
    border-style: solid; 
 
    border: 1px solid #1cbc2d; 
 
    color:#fff; 
 
    font-size:10pt; 
 
} 
 

 
.why-give { 
 
    color:#20A1D4; 
 
    font-style: italic; 
 
    font-size:9pt; 
 
    margin-top:6px; 
 
}

<input class="text-input" type="text" value="$50"/> 
 
<input class="green-button" type="button" value="Give Now"/> 
 

 
<div class="why-give">Why give $50?</div>

来源

2017-09-15 13:59:29 jfeferman

唯一明智的答案。做得好。 – Turnip

下面是一些你可以开始：

.white-button{ 
 
    width: 100px; 
 
    height: 25px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color:#eaeaea; 
 
    text-align: justify; 
 
    display: inline-block; 
 
    padding-top: 5px; 
 
} 
 
.green-button{ 
 
    width: 100px; 
 
    height: 25px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color:#eaeaea; 
 
    text-align: justify; 
 
    display: inline-block; 
 
    background: #00be1c; 
 
    border-radius: 3px; 
 
    padding-top: 5px; 
 
    text-align: center; 
 
    color: white; 
 
} 
 
.why { 
 
    color:#20A1D4; 
 
    font-style: italic; 
 
}

<div> 
 
    <div class="white-button">$ 50 </div> 
 
    <div class="green-button">Give Now</div> 
 
</div> 
 

 
<span class="why">Why give $5o?</span>

的inline是你要找没有什么。你需要inline-block。

来源

2017-09-15 13:49:11 Dekel

你要做出以下修改：

.white-button{ 
 
    width: 70px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color:#eaeaea; 
 
    text-align: justify; 
 
    display: flex; 
 
    padding-left: 10px; 
 
    align-items: center; 
 
    justify-content: left; 
 
    border-radius: 3px; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 13px; 
 
} 
 
.green-button{ 
 
    border: none; 
 
    text-align: justify; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    padding: 10px 15px; 
 
    margin-left: 15px; 
 
    background-color: #00be1c; 
 
    color: #fff; 
 
    font-family: Arial, sans-serif; 
 
    border-radius: 3px; 
 
    font-size: 13px; 
 
    cursor: pointer; 
 
}

<span style="display: flex;"> 
 
    <span class="white-button">$ 50 
 
    </span> 
 
    <span class="green-button">Give Now 
 
    </span> 
 
    </span> 
 
    <font style="color:#20A1D4; text-align:left;"> 
 
    <i>Why give $5o?</i> 
 
    </font>

来源

2017-09-15 13:51:56

在HTML和CSS中创建内联跨度类

回答

相关问题