在CSS中如何给一个单词下划线并控制元素的边距。

huangapple go评论63阅读模式
英文:

How to put a line under a word and controle marging of an element CSS

问题

I can help you with the translation. Here are the translated parts:

第一个问题,我想控制单词下的线的宽度,请问如何实现这个效果,请告诉我,
在此输入图像描述
我尝试使用 text-decoration: underline;,但它给整个单词下面加了一条线。

第二个问题,我想将一个容器放在另一个容器上面,第一个容器带有一张图片,第二个容器带有一个表单。当我在平板电脑上打开时:
在此输入图像描述
它显示了预期的结果,但在浏览器中打开时:
在此输入图像描述
如您所见,图像被推到了左侧。我想要的是,无论如何,都希望图像始终显示在屏幕的右侧,就像这样:
在此输入图像描述

第一个容器的CSS样式:

background: #F8F8F8;
margin-right: 40px;
padding: 35px;
position: relative;
z-index: 999;

包含图像的容器的CSS样式:

height: 350px;
position: absolute;
z-index: 1;

希望这些翻译对您有帮助。如果您有其他问题,请随时提出。

英文:

I'm facing two issues please,

first I want to controle width of a line under a word, could you tell me please how can I achieve this result please,
enter image description here
I tries to put text-decoration: underline; but it gives a line under the whole word.
the second problem, I want to put a container over a container, the first one with an image and the second one with a form, when I open in:
tablette :
enter image description here
it gives the expected result, but when I open in the browser it gives this :
enter image description here
as you see the image is pushed on the left.
what I'm looking for , is I want the image to be displayed always at the right of the screen like this :
enter image description here

css of the first container :

background: #F8F8F8;
margin-right: 40px;
padding: 35px;
position: relative;
z-index: 999;

css of the container contains the image :

height: 350px;
position: absolute;
z-index: 1;

css of the first container :

background: #F8F8F8;
margin-right: 40px;
padding: 35px;
position: relative;
z-index: 999;

css of the container contains the image :

height: 350px;
position: absolute;
z-index: 1;

答案1

得分: 0

For the first thing:

HTML:

<span class="underlined-text">创建您的公司</span>

CSS:

.underlined-text {
    position: relative;
    display: inline-block;
}

.underlined-text::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    display: block;
    height: 2px;
    background-color: black;
    width: 100%; /* 更改此处以实现您想要的效果 */
}

As for your second problem, I don't really get what's the problem but one possible solution is specifying a width for divs. This will make sure that the divs don't take all available space.

英文:

For the first thing:

HTML:

&lt;span class=&quot;underlined-text&quot;&gt;Creez Vorte Compe&lt;/span&gt;

CSS:

.underlined-text {
    position: relative;
    display: inline-block;
}

.underlined-text::after {
    content: &#39;&#39;;
    position: absolute;
    bottom: -3px;
    left: 0;
    display: block;
    height: 2px;
    background-color: black;
    width: 100%; /* Change this to achieve what you want to achieve */
}

As for your second problem, I don't really get what's the problem but one possible solution is specifying a width for divs. This will make sure that the divs don't take all available space.

huangapple
  • 本文由 发表于 2023年5月13日 17:48:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76242076.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定