Question

我正在尝试将html输入元素和svg图像显示在同一行上。 stackoverflow上存在几个建议的解决方案，但我无法工作。

当前的HTML代码：

<div id = "inline_elements" style="width:100%">  
    <div class="data" id="text_data"><input type="text" width="48" height="48"/></div>
    <div class="svg_container">
        <svg id="svg_image" width="48" height="48"></svg>
    </div>
</div>

css代码：

#svg_image {
    width: 48px;
    height: 48px;
    vertical-align: middle;
}

.data {
    display: inline-block;
}

.svg_container {
    display: inline-block;
}

任何帮助都将不胜感激。

https://jsfiddle.net/bzu2x1vv/

我尝试更改以下id字段，但仍然将图像放在输入字段下方：

.data {
    width: 50%;
    float: left;
    text-align: left;
}

.svg_result_container {
    width: 50%;
    float: right;
    text-align: right;
}

Answer 1

我无法删除这个问题，因为它有答案，但代码可以将图像放在与输入字段相同的行中

Answer 2

在ur html中创建宽度为100％的父div。之后创建一个两个子div，其中第一个子div具有50％宽度，左边是float，text对齐center属性。 amother div包含的图像将具有宽度50％浮动右侧文本 - 对齐中心的属性。

尝试这个并告诉我。

HTML如何使输入和图像显示在同一行

2 个答案: